:root {
            --primary-color: #2563eb;
            --primary-hover: #1d4ed8;
            --background-color: #f4f6fb;
            --card-background: #ffffff;
            --text-color: #1f2937;
            --subtle-text-color: #6b7280;
            --border-color: #e5e7eb;
            --income-color: #10b981;
            --expenditure-color: #ef4444;
            --shadow: 0 18px 40px rgba(37, 99, 235, 0.12);
            --border-radius: 14px;
            --base-font-size: 0.95rem;
        }

        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }

        img,
        svg,
        canvas {
            max-width: 100%;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        body {
            font-family: 'Noto Sans JP', sans-serif;
            background: radial-gradient(circle at 20% 20%, rgba(37, 99, 235, 0.06), transparent 35%),
                radial-gradient(circle at 80% 10%, rgba(16, 185, 129, 0.07), transparent 30%),
                var(--background-color);
            color: var(--text-color);
            margin: 0;
            line-height: 1.6;
            overflow-x: hidden;
            font-size: var(--base-font-size);
        }

        body.sidebar-open {
            overflow: hidden;
        }

        /* AI chat mobile layout only */
        @media (max-width: 600px) {
            #ai-chat-modal {
                align-items: stretch;
                padding: 0;
            }

            #ai-chat-modal .ai-chat-content {
                width: 100%;
                height: 100dvh;
                max-width: none;
                max-height: 100dvh;
                border: 0;
                border-radius: 0;
            }

            #ai-chat-modal .modal-header {
                display: grid;
                grid-template-columns: minmax(0, 1fr) auto;
                min-height: 56px;
                padding: max(0.55rem, env(safe-area-inset-top)) 0.65rem 0.55rem;
                gap: 0.5rem;
                border-radius: 0;
            }

            #ai-chat-modal .modal-header>div:first-child {
                display: flex;
                align-items: center;
                min-width: 0;
            }

            #ai-chat-modal .modal-header h2 {
                flex: none;
                margin: 0;
                font-size: 1rem !important;
                white-space: nowrap;
            }

            #ai-chat-modal .ai-chat-header-actions {
                display: flex;
                width: auto;
                margin: 0;
                gap: 0.4rem;
            }

            #ai-chat-modal .ai-chat-header-actions .btn-secondary {
                flex: none;
                width: auto;
                min-height: 36px;
                padding: 0.45rem 0.65rem;
                font-size: 0.72rem !important;
                white-space: nowrap;
            }

            #ai-chat-modal .modal-header .close-btn {
                width: 36px;
                height: 36px;
                min-height: 36px;
                margin: 0;
                position: static;
            }

            #ai-chat-modal .ai-chat-toolbar {
                display: grid;
                grid-template-columns: minmax(0, 1fr);
                width: 100%;
                padding: 0.5rem 0.65rem;
                gap: 0.3rem;
            }

            #ai-chat-modal .ai-data-consent {
                width: 100%;
                min-height: 40px;
                padding: 0.5rem 0.6rem;
                font-size: 0.75rem !important;
                line-height: 1.35;
            }

            #ai-chat-modal #ai-chat-status {
                min-height: 1rem;
                padding: 0 0.15rem;
                font-size: 0.66rem !important;
                line-height: 1.35;
            }

            #ai-chat-modal .ai-chat-messages {
                width: 100%;
                padding: 0.65rem;
                gap: 0.65rem;
            }

            #ai-chat-modal .ai-chat-welcome,
            #ai-chat-modal .ai-message {
                max-width: 96%;
                padding: 0.7rem 0.75rem;
                border-radius: 10px;
            }

            #ai-chat-modal .ai-message-user {
                max-width: 90%;
            }

            #ai-chat-modal .ai-message-body p {
                line-height: 1.6;
            }

            #ai-chat-modal .ai-chat-composer {
                grid-template-columns: minmax(0, 1fr) auto;
                width: 100%;
                padding: 0.55rem 0.65rem max(0.55rem, env(safe-area-inset-bottom));
                gap: 0.45rem;
            }

            #ai-chat-modal .ai-chat-composer textarea {
                min-width: 0;
                max-height: 96px;
                padding: 0.6rem 0.65rem;
                font-size: 0.88rem !important;
            }

            #ai-chat-modal .ai-chat-composer .btn-primary {
                min-width: 64px;
                padding: 0.5rem 0.7rem;
                font-size: 0.82rem !important;
            }

            #ai-chat-modal .ai-table-wrapper table {
                min-width: 320px;
            }
        }

        /* AI chat follows the shared popup design */
        #ai-chat-modal .ai-chat-content {
            width: min(94vw, 980px);
            height: min(86dvh, 760px);
            max-height: min(86dvh, 760px);
            border-radius: 16px;
        }

        #ai-chat-modal .modal-header {
            min-height: 64px;
            padding: 1rem 1.25rem;
            background: #f8fafc;
            border-bottom: 1px solid var(--border-color);
        }

        #ai-chat-modal .ai-chat-header-actions {
            margin-left: auto;
        }

        #ai-chat-modal .ai-chat-header-actions .btn-secondary,
        #ai-chat-modal .ai-chat-composer .btn-primary {
            min-height: 42px;
            padding: 0.65rem 1.05rem;
            border-radius: 10px;
            font-size: 0.92rem !important;
            font-weight: 700;
        }

        #ai-chat-modal .ai-chat-toolbar {
            padding: 0.8rem 1.25rem;
            background: #ffffff;
        }

        #ai-chat-modal .ai-data-consent {
            min-height: 44px;
            padding: 0.65rem 0.8rem;
            background: #f8fafc;
            border-radius: 10px;
            font-size: 0.88rem !important;
            font-weight: 700;
        }

        #ai-chat-modal .ai-chat-messages {
            padding: 1.25rem;
            background: #f8fafc;
        }

        #ai-chat-modal .ai-chat-welcome,
        #ai-chat-modal .ai-message {
            border-radius: 12px;
            box-shadow: none;
        }

        #ai-chat-modal .ai-chat-composer {
            align-items: end;
            padding: 1rem 1.25rem;
            background: #ffffff;
            border-top: 1px solid var(--border-color);
        }

        #ai-chat-modal .ai-chat-composer textarea {
            height: 44px;
            min-height: 44px;
            max-height: 120px;
            padding: 0.65rem 0.8rem;
            background: #f8fafc;
            border-radius: 10px;
            font-family: inherit;
            font-size: 0.95rem !important;
            line-height: 1.4;
            resize: none;
            overflow-y: auto;
        }

        #ai-chat-modal .ai-chat-composer textarea:focus {
            outline: none;
            background: #ffffff;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
        }

        #ai-chat-modal .ai-chat-composer .btn-primary {
            align-self: end;
            width: auto;
            min-width: 76px;
            height: 44px;
            min-height: 44px;
            max-height: 44px;
            padding: 0.55rem 1rem;
            white-space: nowrap;
        }

        @media (max-width: 600px) {
            #ai-chat-modal .ai-chat-content {
                width: 100%;
                height: calc(100dvh - 1rem);
                max-height: calc(100dvh - 1rem);
            }

            #ai-chat-modal .modal-header,
            #ai-chat-modal .ai-chat-toolbar,
            #ai-chat-modal .ai-chat-messages,
            #ai-chat-modal .ai-chat-composer {
                padding-left: 0.75rem;
                padding-right: 0.75rem;
            }

            #ai-chat-modal .ai-chat-header-actions {
                width: 100%;
                margin-left: 0;
            }

            #ai-chat-modal .ai-chat-header-actions .btn-secondary {
                flex: 1 1 auto;
            }

            #ai-chat-modal .ai-chat-composer {
                grid-template-columns: minmax(0, 1fr) auto;
            }

            #ai-chat-modal .ai-chat-composer .btn-primary {
                width: auto;
                min-width: 68px;
            }
        }

        /* Final AI component overrides */
        #ai-chat-modal .ai-chat-content {
            width: min(94vw, 980px);
            height: min(88dvh, 820px);
            max-width: 980px;
            max-height: min(88dvh, 820px);
            overflow: hidden;
        }

        #ai-chat-modal .modal-header {
            margin: 0;
            padding: 0.85rem 1rem;
        }

        #ai-chat-modal .ai-chat-composer {
            margin: 0;
            max-width: none;
            overflow: visible;
        }

        #admin-settings-modal .admin-ai-settings .form-actions {
            position: static;
            display: flex;
            justify-content: flex-end;
            width: 100%;
            margin: 0;
            padding: 0;
            background: transparent;
            box-shadow: none;
        }

        @media (max-width: 768px) {
            #ai-chat-modal {
                padding: 0.5rem;
            }

            #ai-chat-modal .ai-chat-content {
                width: 100%;
                height: calc(100dvh - 1rem);
                max-height: calc(100dvh - 1rem);
            }

            #admin-settings-modal .admin-ai-settings .form-actions button {
                width: 100%;
            }
        }

        /* AI chat */
        .ai-chat-content {
            display: flex;
            flex-direction: column;
            width: min(960px, calc(100vw - 2rem));
            height: min(820px, calc(100dvh - 2rem));
            max-height: calc(100dvh - 2rem);
            overflow: hidden;
        }

        .ai-chat-content .modal-header {
            flex: 0 0 auto;
        }

        .ai-chat-kicker {
            margin: 0 0 0.2rem;
            color: var(--primary-color);
            font-size: 0.68rem !important;
            font-weight: 800;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }

        .ai-chat-header-actions {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .ai-chat-toolbar {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: center;
            gap: 0.7rem;
            padding: 0.7rem 1rem;
            background: #f8fafc;
            border-bottom: 1px solid var(--border-color);
        }

        .ai-chat-toolbar label {
            margin: 0;
            font-size: 0.78rem;
            font-weight: 800;
        }

        .ai-data-consent {
            display: flex;
            align-items: center;
            gap: 0.55rem;
            min-width: 0;
            padding: 0.55rem 0.7rem;
            background: #ffffff;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            cursor: pointer;
        }

        .ai-data-consent input {
            flex: 0 0 auto;
            width: 1rem;
            height: 1rem;
            margin: 0;
            accent-color: var(--primary-color);
        }

        .ai-data-consent span {
            overflow-wrap: anywhere;
        }

        #ai-chat-status {
            color: var(--subtle-text-color);
            font-size: 0.72rem;
            overflow-wrap: anywhere;
        }

        .ai-chat-messages {
            display: flex;
            flex: 1 1 auto;
            flex-direction: column;
            gap: 0.85rem;
            min-height: 0;
            padding: 1rem;
            overflow: auto;
            background: #f8fafc;
            scrollbar-width: none;
        }

        .ai-chat-messages::-webkit-scrollbar {
            display: none;
        }

        .ai-chat-welcome,
        .ai-message {
            max-width: min(86%, 760px);
            padding: 0.85rem 1rem;
            background: #ffffff;
            border: 1px solid var(--border-color);
            border-radius: 14px;
            box-shadow: 0 5px 18px rgba(15, 23, 42, 0.05);
        }

        .ai-chat-welcome p,
        .ai-message-body p {
            margin: 0.45rem 0 0;
            line-height: 1.75;
        }

        .ai-message-user {
            align-self: flex-end;
            color: #ffffff;
            background: var(--primary-color);
            border-color: var(--primary-color);
        }

        .ai-message-assistant {
            align-self: flex-start;
        }

        .ai-message.is-pending {
            opacity: 0.65;
        }

        .ai-message-body.is-streaming {
            line-height: 1.75;
            white-space: pre-wrap;
            overflow-wrap: anywhere;
        }

        .ai-message-label {
            display: block;
            margin-bottom: 0.3rem;
            font-size: 0.7rem;
        }

        .ai-message-body h3,
        .ai-message-body h4,
        .ai-message-body h5,
        .ai-message-body h6 {
            margin: 0.9rem 0 0.4rem;
            color: var(--text-color);
            line-height: 1.4;
        }

        .ai-message-body h3 {
            padding-bottom: 0.35rem;
            border-bottom: 1px solid var(--border-color);
            font-size: 1.1rem !important;
        }

        .ai-message-body h4 {
            font-size: 1rem !important;
        }

        .ai-message-body h5,
        .ai-message-body h6 {
            font-size: 0.92rem !important;
        }

        .ai-message-body ul,
        .ai-message-body ol {
            margin: 0.45rem 0;
            padding-left: 1.4rem;
        }

        .ai-message-body li {
            margin: 0.25rem 0;
            line-height: 1.65;
        }

        .ai-message-body .ai-task-item {
            display: flex;
            align-items: flex-start;
            gap: 0.45rem;
            list-style: none;
        }

        .ai-message-body .ai-task-item input {
            flex: 0 0 auto;
            width: 1rem;
            height: 1rem;
            margin-top: 0.28rem;
            accent-color: var(--primary-color);
        }

        .ai-message-body hr {
            height: 1px;
            margin: 1rem 0;
            background: var(--border-color);
            border: 0;
        }

        .ai-message-body blockquote {
            margin: 0.7rem 0;
            padding: 0.15rem 0.85rem;
            color: var(--subtle-text-color);
            background: #f8fafc;
            border-left: 4px solid var(--primary-color);
            border-radius: 0 8px 8px 0;
        }

        .ai-message-body blockquote p {
            margin: 0.35rem 0;
        }

        .ai-message-body a {
            color: var(--primary-color);
            font-weight: 700;
            text-decoration: underline;
            text-underline-offset: 2px;
        }

        .ai-message-body del {
            color: var(--subtle-text-color);
        }

        .ai-message-body .ai-markdown-image-link {
            display: flex;
            align-items: center;
            width: fit-content;
            max-width: 100%;
            margin: 0.7rem 0;
            padding: 0.55rem 0.7rem;
            overflow-wrap: anywhere;
            color: var(--primary-color);
            background: #f8fafc;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            font-size: 0.82rem;
            line-height: 1.5;
        }

        .ai-message-body dl {
            margin: 0.7rem 0;
        }

        .ai-message-body dt {
            margin-top: 0.55rem;
            font-weight: 700;
        }

        .ai-message-body dd {
            margin: 0.2rem 0 0.55rem 1rem;
            padding-left: 0.75rem;
            color: var(--subtle-text-color);
            border-left: 2px solid var(--border-color);
        }

        .ai-message-body .ai-footnote {
            padding-top: 0.45rem;
            color: var(--subtle-text-color);
            border-top: 1px dashed var(--border-color);
            font-size: 0.82rem !important;
        }

        .ai-message-body .ai-footnote-reference {
            color: var(--primary-color);
            font-weight: 700;
        }

        .ai-message-body pre {
            max-width: 100%;
            margin: 0.7rem 0;
            padding: 0.75rem;
            overflow: auto;
            color: #e2e8f0;
            background: #0f172a;
            border-radius: 8px;
        }

        .ai-message-body code {
            font-family: Consolas, monospace;
        }

        .ai-message-body :not(pre)>code {
            padding: 0.12rem 0.32rem;
            color: #9f1239;
            background: #fff1f2;
            border: 1px solid #ffe4e6;
            border-radius: 5px;
        }

        .ai-message-body .ai-math-inline,
        .ai-message-body .ai-math-block {
            color: #1e3a8a;
            background: #eff6ff;
            border: 1px solid #dbeafe;
        }

        .ai-message-body .ai-math-block {
            white-space: pre-wrap;
        }

        .ai-table-wrapper {
            max-width: 100%;
            margin-top: 0.65rem;
            overflow: auto;
            border: 1px solid var(--border-color);
            border-radius: 8px;
        }

        .ai-table-wrapper table {
            width: 100%;
            min-width: 360px;
            border-collapse: collapse;
            background: #ffffff;
        }

        .ai-table-wrapper th,
        .ai-table-wrapper td {
            padding: 0.55rem 0.65rem;
            color: var(--text-color);
            text-align: left;
            border-bottom: 1px solid var(--border-color);
        }

        .ai-table-wrapper th {
            background: #eef2ff;
        }

        .ai-chat-composer {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 0.7rem;
            flex: 0 0 auto;
            padding: 0.85rem 1rem;
            background: #ffffff;
            border-top: 1px solid var(--border-color);
        }

        .ai-chat-composer textarea {
            width: 100%;
            min-height: 64px;
            max-height: 180px;
            resize: vertical;
            padding: 0.7rem 0.8rem;
            border: 1px solid var(--border-color);
            border-radius: 10px;
        }

        .ai-chat-composer button {
            min-width: 96px;
        }

        .admin-ai-settings {
            display: grid;
            gap: 0.8rem;
            margin-bottom: 1rem;
            padding: 1rem;
            background: linear-gradient(145deg, #f8fafc, #ffffff);
            border: 1px solid var(--border-color);
            border-radius: 14px;
        }

        .admin-ai-settings-heading {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1rem;
        }

        .admin-ai-settings-heading h3 {
            margin: 0.1rem 0;
        }

        .admin-ai-enabled {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin: 0;
            padding: 0.6rem 0.75rem;
            background: #ffffff;
            border: 1px solid var(--border-color);
            border-radius: 9px;
            white-space: nowrap;
        }

        .admin-ai-settings-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.75rem;
        }

        .admin-ai-settings-grid .form-group {
            margin: 0;
        }

        .admin-ai-settings-grid input,
        .admin-ai-settings-grid select {
            width: 100%;
            min-height: 42px;
        }

        @media (max-width: 768px) {
            .ai-chat-content {
                width: calc(100vw - 1rem);
                height: calc(100dvh - 1rem);
                max-height: calc(100dvh - 1rem);
            }

            .ai-chat-header-actions .btn-secondary {
                padding: 0.5rem 0.65rem;
                font-size: 0.7rem !important;
            }

            .ai-chat-toolbar {
                grid-template-columns: minmax(0, 1fr);
                gap: 0.4rem;
            }

            .ai-chat-toolbar label {
                font-size: 0.72rem;
            }

            .ai-chat-messages {
                padding: 0.7rem;
            }

            .ai-chat-welcome,
            .ai-message {
                max-width: 94%;
            }

            .ai-chat-composer {
                grid-template-columns: minmax(0, 1fr);
                padding: 0.7rem;
            }

            .ai-chat-composer textarea {
                min-height: 58px;
            }

            .ai-chat-composer button {
                width: 100%;
                min-height: 44px;
            }

            .admin-ai-settings-heading {
                display: grid;
            }

            .admin-ai-enabled {
                white-space: normal;
            }

            .admin-ai-settings-grid {
                grid-template-columns: minmax(0, 1fr);
            }
        }

        .account-auth-overlay {
            position: fixed;
            inset: 0;
            z-index: 5000;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 1rem;
            background: rgba(15, 23, 42, 0.72);
            backdrop-filter: blur(12px);
        }

        .account-auth-overlay.visible {
            display: flex;
        }

        .account-auth-card {
            width: min(100%, 430px);
            max-height: calc(100dvh - 2rem);
            padding: 1.5rem;
            overflow-y: auto;
            background: #ffffff;
            border: 1px solid rgba(255, 255, 255, 0.45);
            border-radius: 20px;
            box-shadow: 0 28px 70px rgba(15, 23, 42, 0.32);
        }

        .account-auth-header {
            margin-bottom: 1rem;
            text-align: center;
        }

        .account-auth-header h2 {
            margin: 0 0 0.35rem;
            color: var(--primary-color);
            font-size: 1.35rem;
        }

        .account-auth-header p,
        .account-auth-security {
            margin: 0;
            color: var(--subtle-text-color);
            font-size: 0.78rem;
        }

        .account-auth-tabs {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.35rem;
            margin-bottom: 1rem;
            padding: 0.3rem;
            background: #f1f5f9;
            border-radius: 11px;
        }

        .account-auth-tab {
            min-height: 40px;
            border: 0;
            border-radius: 8px;
            background: transparent;
            color: var(--subtle-text-color);
            font: inherit;
            font-weight: 700;
            cursor: pointer;
        }

        .account-auth-tab.active {
            background: #ffffff;
            color: var(--primary-color);
            box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
        }

        .account-auth-form {
            display: grid;
            gap: 0.55rem;
        }

        .account-auth-form[hidden] {
            display: none;
        }

        .account-auth-form label {
            color: var(--text-color);
            font-size: 0.82rem;
            font-weight: 700;
        }

        .account-auth-form input {
            width: 100%;
            min-height: 44px;
            padding: 0.65rem 0.8rem;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            background: #f8fafc;
            font: inherit;
        }

        .account-auth-form input:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
            background: #ffffff;
        }

        .account-auth-form button {
            min-height: 44px;
            margin-top: 0.45rem;
            border: 0;
            border-radius: 10px;
            font: inherit;
            font-weight: 700;
            cursor: pointer;
        }

        .account-guest-area {
            display: grid;
            gap: 0.35rem;
            margin-top: 0.85rem;
            padding-top: 0.85rem;
            border-top: 1px solid var(--border-color);
            text-align: center;
        }

        .account-guest-area button {
            min-height: 42px;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            background: #ffffff;
            color: var(--text-color);
            font: inherit;
            font-weight: 700;
            cursor: pointer;
        }

        .account-guest-area button:hover {
            border-color: var(--primary-color);
            color: var(--primary-color);
            background: #eff6ff;
        }

        .account-guest-area p {
            margin: 0;
            color: var(--subtle-text-color);
            font-size: 0.72rem;
        }

        .account-auth-error {
            min-height: 1.4em;
            margin: 0.8rem 0 0.35rem;
            color: var(--expenditure-color);
            font-size: 0.8rem;
            text-align: center;
        }

        .account-auth-security {
            text-align: center;
        }

        header {
            background-color: rgba(255, 255, 255, 0.9);
            padding: 0.75rem 1.5rem;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            border-bottom: 1px solid var(--border-color);
            box-shadow: var(--shadow);
            backdrop-filter: blur(10px);
            position: sticky;
            top: 0;
            z-index: 1020;
            gap: 0.5rem;
            box-sizing: border-box;
            max-width: 100%;
        }

        /* === Header Bar === */
        .header-bar {
            display: flex;
            align-items: center;
            gap: 1rem;
            width: 100%;
        }

        .header-title {
            display: block;
        }

        .header-identity {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            min-width: 0;
            flex-shrink: 1;
        }

        .sidebar-toggle-btn {
            background: #ffffff;
            border: 1px solid var(--border-color);
            border-radius: 9px;
            padding: 0.5rem;
            cursor: pointer;
            color: var(--text-color);
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 40px;
            min-height: 40px;
            transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
            box-shadow: none;
            flex-shrink: 0;
        }

        .sidebar-toggle-btn:hover {
            background: #f8fafc;
            border-color: #cbd5e1;
            color: var(--text-color);
        }

        .sidebar-toggle-btn svg {
            width: 22px;
            height: 22px;
        }

        /* === Header Edit Controls === */
        .header-edit-controls {
            display: flex;
            gap: 0.5rem;
            flex-shrink: 0;
            align-items: center;
            margin-left: auto;
        }

        .header-edit-btn {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 0.5rem 0.85rem;
            border-radius: var(--border-radius);
            cursor: pointer;
            font-size: 0.85rem;
            font-weight: 600;
            white-space: nowrap;
            transition: background-color 0.2s, transform 0.1s, box-shadow 0.2s;
            box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
        }

        .header-edit-btn:hover {
            background-color: var(--primary-hover);
            transform: translateY(-1px);
            box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3);
        }

        #edit-mode-toggle {
            background-color: #28a745;
        }

        #edit-mode-toggle:hover {
            background-color: #218838;
        }

        #edit-mode-toggle.active {
            background-color: #218838;
            box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.35);
        }

        #bulk-edit-button {
            background-color: #fd7e14;
        }

        #bulk-edit-button:hover {
            background-color: #e86a04;
        }

        #bulk-add-button {
            background-color: #20c997;
        }

        #bulk-add-button:hover {
            background-color: #1baa80;
        }

        #user-name-container {
            flex-shrink: 0;
        }

        #user-name-display {
            font-size: 1rem;
            margin: 0;
            color: var(--text-color);
            white-space: nowrap;
        }

        #search-box {
            padding: 0.5rem 1rem;
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            font-size: 0.95rem;
            flex-grow: 1;
            min-width: 150px;
            max-width: 350px;
            transition: box-shadow 0.2s, border-color 0.2s;
        }

        #search-box:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
        }

        .search-only-field {
            box-sizing: border-box;
            min-width: 0;
            color: var(--text-color);
            background-color: #ffffff;
            font-family: inherit;
            line-height: normal;
            white-space: nowrap;
            overflow: hidden;
            cursor: text;
        }

        .search-only-field:empty::before {
            content: attr(data-placeholder);
            color: var(--subtle-text-color);
            pointer-events: none;
        }

        .search-only-field:focus {
            outline: none;
        }

        /* === Sidebar === */
        .sidebar-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(15, 23, 42, 0.48);
            backdrop-filter: blur(3px);
            z-index: 1080;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }

        .sidebar-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .sidebar {
            position: fixed;
            top: 0;
            left: 0;
            width: min(340px, 88vw);
            height: 100%;
            background: #ffffff;
            box-shadow: 12px 0 32px rgba(15, 23, 42, 0.18);
            z-index: 1090;
            transform: translateX(-100%);
            transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            flex-direction: column;
            overflow-y: auto;
            overflow-x: hidden;
        }

        .sidebar.open {
            transform: translateX(0);
        }

        .sidebar-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 1rem;
            padding: 1.25rem;
            border-bottom: 1px solid var(--border-color);
            flex-shrink: 0;
            background: #f8fafc;
        }

        .sidebar-kicker {
            margin: 0 0 0.2rem;
            color: var(--subtle-text-color);
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .sidebar-title {
            margin: 0;
            font-size: 1.2rem;
            font-weight: 700;
            color: var(--primary-color);
            letter-spacing: 0;
        }

        .sidebar-close-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            flex: 0 0 auto;
            font-size: 1.65rem;
            font-weight: 700;
            background: #ffffff;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            cursor: pointer;
            color: var(--subtle-text-color);
            padding: 0;
            line-height: 1;
            opacity: 1;
            transition: background-color 0.2s, color 0.2s, border-color 0.2s;
        }

        .sidebar-close-btn:hover {
            color: var(--expenditure-color);
            border-color: rgba(239, 68, 68, 0.32);
            background: #fff1f2;
        }

        .sidebar-close-btn:focus-visible,
        .sidebar-btn:focus-visible {
            outline: 3px solid rgba(37, 99, 235, 0.32);
            outline-offset: 2px;
        }

        .sidebar-nav {
            padding: 0.9rem;
            flex: 1;
            overflow-y: auto;
        }

        .sidebar-group {
            padding: 0.8rem;
            background: #f8fafc;
            border: 1px solid var(--border-color);
            border-radius: 14px;
        }

        .sidebar-group+.sidebar-group {
            margin-top: 0.85rem;
        }

        .sidebar-group-title {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0 0.2rem 0.55rem;
            font-size: 0.75rem;
            font-weight: 700;
            color: var(--subtle-text-color);
            text-transform: uppercase;
            letter-spacing: 0.06em;
            margin: 0;
        }

        .sidebar-group-title svg {
            width: 16px;
            height: 16px;
            opacity: 0.75;
        }

        .sidebar-btn {
            display: flex;
            align-items: center;
            gap: 0.8rem;
            width: 100%;
            min-height: 46px;
            padding: 0.72rem 0.85rem;
            border: 1px solid transparent;
            border-radius: 10px;
            background: #ffffff;
            cursor: pointer;
            font-size: 0.9rem;
            font-weight: 700;
            color: var(--text-color);
            text-align: left;
            transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
            position: relative;
            box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
        }

        .sidebar-btn+.sidebar-btn {
            margin-top: 0.45rem;
        }

        .sidebar-btn:hover {
            background: #eff6ff;
            border-color: rgba(37, 99, 235, 0.22);
            color: var(--primary-color);
            box-shadow: 0 6px 14px rgba(37, 99, 235, 0.08);
        }

        .sidebar-btn:active {
            background: rgba(37, 99, 235, 0.12);
        }

        .sidebar-btn svg {
            width: 22px;
            height: 22px;
            flex-shrink: 0;
            opacity: 0.82;
            transition: opacity 0.15s ease;
            color: var(--primary-color);
        }

        .sidebar-btn:hover svg {
            opacity: 1;
        }




        /* Danger button */
        .sidebar-btn-danger {
            color: #991b1b;
        }

        .sidebar-btn-danger svg {
            color: var(--expenditure-color);
        }

        .sidebar-btn-danger:hover {
            background: #fff1f2;
            border-color: rgba(239, 68, 68, 0.24);
            color: var(--expenditure-color);
        }

        .sidebar-btn-danger:hover::before {
            display: none;
        }

        .sidebar-btn-danger:hover svg {
            fill: var(--expenditure-color);
        }

        #app-container {
            max-width: 1600px;
            margin: 2rem auto;
            padding: 0 1.5rem;
        }

        .total-summary-card {
            background: var(--card-background);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            padding: 1.2rem;
            margin-bottom: 1.6rem;
        }

        body.initial-animation .total-summary-card {
            animation: fadeIn 0.5s ease-out;
        }

        .total-summary-card h2 {
            margin-top: 0;
            color: var(--primary-color);
            text-align: center;
            margin-bottom: 0.9rem;
            font-size: 1.3rem !important;
        }

        .summary-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 0.9rem;
            text-align: center;
        }

        .summary-grid-item .label {
            font-size: 1rem !important;
            color: var(--subtle-text-color);
            margin-bottom: 0.35rem;
        }

        .summary-grid-item .value {
            font-size: 1.5rem !important;
            font-weight: 700;
        }

        .summary-grid-item .value.income {
            color: var(--income-color);
        }

        .summary-grid-item .value.expenditure {
            color: var(--expenditure-color);
        }

        .summary-grid-item .value.net {
            color: var(--primary-color);
        }

        .year-section {
            margin-bottom: 3rem;
        }

        body.initial-animation .year-section {
            animation: fadeIn 0.5s ease-out;
        }

        .year-header {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1.5rem;
            border-bottom: 2px solid var(--primary-color);
            padding-bottom: 0.5rem;
        }

        .year-title {
            font-size: 2rem !important;
            color: var(--text-color);
            margin: 0;
            font-weight: 700;
            flex-shrink: 0;
            white-space: nowrap;
            line-height: 1.2;
        }

        .year-title-editor {
            font-size: 2rem !important;
            font-weight: 700;
            color: var(--text-color);
            border: 2px solid var(--primary-color);
            border-radius: var(--border-radius);
            padding: 0.2rem 1rem;
            margin: 0;
            font-family: inherit;
            width: auto;
            min-width: 400px;
            height: auto !important;
            line-height: 1.2;
            background-color: #e9f5ff;
        }

        .year-title-editor:focus {
            outline: none;
            background-color: white;
            box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2);
        }

        .add-year-btn {
            background: none;
            border: none;
            cursor: pointer;
            padding: 0.25rem;
            opacity: 0.7;
            transition: opacity 0.2s;
            display: none;
            /* Initially hidden */
        }

        body.edit-mode .add-year-btn {
            display: inline-block;
            /* Show in edit mode */
        }

        .add-year-btn:hover {
            opacity: 1;
        }

        .add-year-btn svg {
            width: 28px;
            height: 28px;
            fill: var(--primary-color);
            vertical-align: middle;
        }

        .year-header-editor {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .edit-months-btn {
            background: none;
            border: none;
            cursor: pointer;
            padding: 0.25rem;
            opacity: 0.7;
            transition: opacity 0.2s;
            display: none;
            /* Initially hidden */
        }

        body.edit-mode .edit-months-btn {
            display: inline-block;
            /* Show in edit mode */
        }

        .edit-months-btn:hover {
            opacity: 1;
        }

        .edit-months-btn svg {
            width: 24px;
            height: 24px;
            fill: #ffc107;
            /* Edit color */
            vertical-align: middle;
        }

        .months-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
            gap: 0.9rem;
        }

        @media (min-width: 769px) {
            body.pc-months-scroll .months-grid {
                grid-auto-flow: column;
                grid-auto-columns: minmax(210px, 260px);
                overflow-x: auto;
                overflow-y: hidden;
                padding-bottom: 0.5rem;
                scrollbar-width: thin;
                scrollbar-color: var(--border-color) transparent;
                cursor: grab;
            }

            body.pc-months-scroll .months-grid::-webkit-scrollbar {
                height: 10px;
            }

            body.pc-months-scroll .months-grid::-webkit-scrollbar-track {
                background: transparent;
            }

            body.pc-months-scroll .months-grid::-webkit-scrollbar-thumb {
                background: var(--border-color);
                border-radius: 999px;
            }

            body.pc-months-scroll .months-grid.is-dragging {
                cursor: grabbing;
            }

            body.pc-months-scroll .months-grid.is-dragging * {
                user-select: none;
            }
        }

        .month-card {
            background-color: var(--card-background);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            padding: 0.7rem;
            display: flex;
            flex-direction: column;
            transition: transform 0.3s, box-shadow 0.3s;
            border-top: 5px solid transparent;
        }

        body.initial-animation .month-card {
            animation: fadeIn 0.5s ease-out forwards;
        }

        .month-card.positive-flow {
            border-top-color: var(--income-color);
        }

        .month-card.negative-flow {
            border-top-color: var(--expenditure-color);
        }

        .month-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 1rem 1.5rem rgba(0, 0, 0, 0.18);
        }

        .month-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
        }

        .month-title {
            font-size: 1.05rem;
            color: var(--primary-color);
            font-weight: 700;
            margin: 0;
        }

        .final-balance {
            font-size: 1rem;
            font-weight: 700;
            color: var(--primary-color);
            text-align: right;
            margin-top: 0.8rem;
            padding-top: 0.8rem;
            border-top: 1px solid var(--border-color);
        }

        .summary {
            margin-bottom: 0.8rem;
        }

        .summary-item {
            display: flex;
            justify-content: space-between;
            font-size: 0.85rem;
            margin-bottom: 0.25rem;
            padding: 0.1rem 0;
        }

        .summary-item .label {
            font-weight: 500;
            color: var(--subtle-text-color);
        }

        .summary-item .value {
            font-weight: 700;
        }

        .summary-item .value.income {
            color: var(--income-color);
        }

        .summary-item .value.expenditure {
            color: var(--expenditure-color);
        }

        .chart-container {
            margin: 0.6rem 0;
            cursor: pointer;
        }

        .chart {
            display: flex;
            height: 16px;
            border-radius: var(--border-radius);
            overflow: hidden;
            background-color: #e9ecef;
            position: relative;
        }

        .chart-label {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 0.8rem;
            font-weight: 600;
            color: #fff;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
            pointer-events: none;
            white-space: nowrap;
        }

        .chart-income,
        .chart-expenditure {
            transition: width 0.5s ease-in-out;
        }

        .chart-income {
            background-color: var(--income-color);
        }

        .chart-expenditure {
            background-color: var(--expenditure-color);
        }

        .details {
            border-top: 1px solid var(--border-color);
            margin-top: 0.5rem;
            padding-top: 0.5rem;
        }

        .notes-section {
            margin-bottom: 0.6rem;
        }

        .notes-section h4 {
            margin-bottom: 0.5rem;
        }

        .notes-content {
            color: var(--subtle-text-color);
            white-space: pre-wrap;
            background: #f8f9fa;
            padding: 0.4rem;
            border-radius: var(--border-radius);
            min-height: 40px;
        }

        .notes-editor {
            width: 100%;
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            padding: 0.4rem;
            font-family: inherit;
            font-size: 0.85rem;
            resize: vertical;
            min-height: 60px;
        }

        .income-section,
        .expenditure-section {
            margin-bottom: 0.5rem;
        }

        .income-section h4,
        .expenditure-section h4 {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.9rem;
            margin-bottom: 0.35rem;
        }

        h4 {
            color: var(--text-color);
            margin-top: 0;
        }

        ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }


        .empty-list-placeholder {
            text-align: center;
            padding: 0.65rem;
            color: var(--subtle-text-color);
            background-color: #f8f9fa;
            border-radius: var(--border-radius);
        }

        li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.4rem;
            border-radius: var(--border-radius);
            transition: background-color 0.2s;
            border-bottom: 1px solid var(--border-color);
        }

        li:last-child {
            border-bottom: none;
        }

        li:hover {
            background-color: #f1f3f5;
        }

        .item-disabled-toggle {
            display: none;
            flex: 0 0 auto;
            width: 16px;
            height: 16px;
            margin: 0 0.55rem 0 0;
            accent-color: var(--expenditure-color);
            cursor: pointer;
        }

        body.edit-mode .item-disabled-toggle {
            display: inline-block;
        }

        .item-name {
            flex-grow: 1;
            padding-right: 1rem;
        }

        .item-amount {
            font-weight: 700;
            white-space: nowrap;
        }

        li.item-disabled .item-name,
        li.item-disabled .item-amount {
            color: var(--subtle-text-color) !important;
            text-decoration: line-through;
            opacity: 0.7;
        }

        li span:first-child {
            flex-grow: 1;
            padding-right: 1rem;
        }

        li span:last-child {
            font-weight: 700;
            white-space: nowrap;
        }

        .income-section li span:last-child {
            color: var(--income-color);
        }

        .expenditure-section li span:last-child {
            color: var(--expenditure-color);
        }

        /* Edit Mode Styles */
        .edit-controls {
            display: none;
            gap: 0.5rem;
        }

        body.edit-mode .edit-controls {
            display: flex;
        }

        body.edit-mode li.draggable-item {
            cursor: grab;
        }

        body.edit-mode li.draggable-item:active {
            cursor: grabbing;
        }

        .item-drop-zone {
            min-height: 44px;
            border-radius: var(--border-radius);
        }

        body.edit-mode .item-drop-zone.item-drag-over {
            background: rgba(37, 99, 235, 0.06);
            outline: 2px dashed rgba(37, 99, 235, 0.35);
            outline-offset: 3px;
        }

        body.edit-mode li.draggable-item.is-dragging {
            opacity: 0.45;
        }

        body.edit-mode li.draggable-item.drop-before {
            box-shadow: inset 0 3px 0 var(--primary-color);
        }

        body.edit-mode li.draggable-item.drop-after {
            box-shadow: inset 0 -3px 0 var(--primary-color);
        }

        .control-btn {
            background: none;
            border: none;
            cursor: pointer;
            padding: 0.25rem;
            opacity: 0.7;
            transition: opacity 0.2s;
        }

        .control-btn:hover {
            opacity: 1;
        }

        .control-btn svg {
            width: 20px;
            height: 20px;
            vertical-align: middle;
        }

        .add-btn svg {
            fill: var(--income-color);
        }

        .edit-btn svg {
            fill: #ffc107;
        }

        .delete-btn svg {
            fill: var(--expenditure-color);
        }

        .item-context-menu {
            position: fixed;
            z-index: 1200;
            min-width: 150px;
            padding: 0.35rem;
            display: none;
            background: #ffffff;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            box-shadow: 0 14px 32px rgba(15, 23, 42, 0.18);
        }

        .item-context-menu.visible {
            display: grid;
            gap: 0.15rem;
        }

        .item-context-menu button {
            width: 100%;
            border: 0;
            background: transparent;
            color: var(--text-color);
            border-radius: 6px;
            padding: 0.5rem 0.65rem;
            text-align: left;
            font: inherit;
            font-size: 0.9rem;
            cursor: pointer;
        }

        .item-context-menu button:hover,
        .item-context-menu button:focus-visible {
            outline: none;
            background: #f1f5f9;
        }

        .item-context-menu button.danger {
            color: var(--expenditure-color);
        }

        .item-context-menu button.danger:hover,
        .item-context-menu button.danger:focus-visible {
            background: rgba(239, 68, 68, 0.1);
        }

        /* Modal Styles */
        body.modal-open {
            overflow: hidden;
        }

        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(15, 23, 42, 0.55);
            backdrop-filter: blur(2px);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1050;
        }

        body.initial-animation .modal-overlay {
            animation: fadeIn 0.3s;
        }

        .modal-content,
        .popup-content,
        .password-card {
            background: var(--card-background);
            border-radius: var(--border-radius);
            color: var(--text-color);
            box-shadow: 0 0.75rem 2rem rgba(15, 23, 42, 0.35);
            border: 1px solid var(--border-color);
            font-size: 0.95rem;
        }

        body.initial-animation .modal-content,
        body.initial-animation .popup-content,
        body.initial-animation .password-card {
            animation: fadeIn 0.3s ease-out;
        }

        .modal-content {
            padding: 2rem;
            width: 90%;
            max-width: 500px;
        }

        .modal-content.wide {
            max-width: 950px;
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 1rem;
        }

        .modal-header h2 {
            margin: 0;
            font-size: 1.2rem;
            color: var(--text-color);
        }

        .delete-year-btn {
            background-color: var(--expenditure-color);
            color: white;
            border: none;
            padding: 0.5rem 1rem;
            border-radius: var(--border-radius);
            cursor: pointer;
            font-size: 0.9rem;
            font-weight: 500;
            transition: background-color 0.2s, transform 0.1s;
            margin-left: auto;
            /* Push to the left of close button */
        }

        .delete-year-btn:hover {
            background-color: #c82333;
            transform: translateY(-2px);
        }

        .close-btn {
            font-size: 2rem;
            font-weight: 700;
            background: none;
            border: none;
            cursor: pointer;
            color: #6c757d;
            padding: 0;
            line-height: 1;
            opacity: 0.7;
            transition: opacity 0.2s;
        }

        .close-btn:hover {
            opacity: 1;
        }

        #modal-title {
            margin: 0;
            font-size: 1.2rem;
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 700;
        }

        .form-group input,
        .form-group select {
            width: 100%;
            padding: 0.75rem 1rem;
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            box-sizing: border-box;
            font-size: 1rem;
        }

        .modal-content h3 {
            font-size: 1.05rem;
        }

        .modal-content .form-group label {
            font-size: 0.9rem;
        }

        .modal-content .form-group input,
        .modal-content .form-group select,
        .modal-content .form-group textarea {
            font-size: 0.95rem;
        }

        .form-actions {
            margin-top: 2rem;
            display: flex;
            justify-content: flex-end;
            gap: 0.75rem;
        }

        .form-actions button {
            padding: 0.75rem 1.5rem;
            border-radius: var(--border-radius);
            border: none;
            cursor: pointer;
            font-weight: 700;
            font-size: 1rem;
            transition: background-color 0.2s, transform 0.1s;
        }

        .form-actions button:hover {
            transform: translateY(-2px);
        }

        .btn-primary {
            background-color: var(--primary-color);
            color: white;
        }

        .btn-primary:hover {
            background-color: var(--primary-hover);
        }

        .btn-secondary {
            background-color: #6c757d;
            color: white;
        }

        .btn-secondary:hover {
            background-color: #5a6268;
        }

        .btn-info {
            background-color: #20c997;
            /* Using teal from bulk-add */
            color: white;
        }

        .btn-info:hover {
            background-color: #1baa80;
        }

        .add-item-bulk-targets {
            margin-top: 0.25rem;
        }

        .add-item-bulk-targets .add-item-bulk-toggle,
        .add-item-bulk-targets .add-item-bulk-select-all {
            display: inline-flex;
            align-items: center;
            gap: 0.55rem;
            width: auto;
            margin: 0;
            font-weight: 600;
            cursor: pointer;
        }

        .add-item-bulk-targets input[type="checkbox"] {
            width: 1rem;
            height: 1rem;
            min-width: 1rem;
            margin: 0;
            padding: 0;
            cursor: pointer;
            accent-color: var(--primary-color);
        }

        .add-item-bulk-options {
            margin-top: 0.75rem;
            padding: 0.85rem;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            background: #f8fafc;
        }

        .add-item-bulk-months {
            max-height: 170px;
            margin-top: 0.75rem;
            overflow-y: auto;
            display: grid;
            gap: 0.85rem;
        }

        .add-item-bulk-year-group {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(82px, 1fr));
            gap: 0.35rem 0.5rem;
        }

        .add-item-bulk-year-title {
            grid-column: 1 / -1;
            margin-bottom: 0.1rem;
            color: var(--subtle-text-color);
            font-size: 0.85rem;
            font-weight: 700;
        }

        .add-item-bulk-targets .add-item-bulk-month {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            width: auto;
            min-width: 0;
            margin: 0;
            padding: 0.35rem 0.45rem;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            background: #ffffff;
            font-weight: 500;
            line-height: 1.2;
        }

        .add-item-bulk-targets .add-item-bulk-month span {
            overflow: visible;
            text-overflow: clip;
            white-space: nowrap;
        }

        /* Bulk Edit Modal Styles */
        .bulk-edit-columns {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
        }

        .bulk-edit-column h4 {
            margin-top: 0;
            margin-bottom: 1rem;
            color: var(--primary-color);
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 0.75rem;
        }

        .months-checkbox-container {
            max-height: 300px;
            overflow-y: auto;
            border: 1px solid var(--border-color);
            padding: 1rem;
            border-radius: var(--border-radius);
            background-color: #f8f9fa;
        }

        .month-checkbox-group {
            margin-bottom: 1rem;
        }

        .month-checkbox-group-title {
            font-weight: 700;
            margin-bottom: 0.75rem;
            display: block;
            font-size: 1.1rem;
        }

        .month-checkbox-item {
            display: flex;
            align-items: center;
            margin-bottom: 0.5rem;
        }

        .month-checkbox-item input[type="checkbox"] {
            margin-right: 0.75rem;
            width: 1.15rem;
            height: 1.15rem;
            cursor: pointer;
        }

        .month-checkbox-item label {
            font-size: 1rem;
            cursor: pointer;
        }

        .month-checkbox-item.disabled label {
            color: var(--subtle-text-color);
            cursor: not-allowed;
            text-decoration: line-through;
        }

        .month-checkbox-item.disabled input[type="checkbox"] {
            cursor: not-allowed;
        }

        /* Summary Modal Content */
        #summary-content,
        #category-summary-content {
            max-height: 75vh;
            overflow-y: auto;
        }

        .summary-year-section {
            margin-bottom: 2.5rem;
        }

        .summary-year-title {
            font-size: 1.75rem;
            color: var(--text-color);
            margin-bottom: 1rem;
            border-bottom: 2px solid var(--primary-color);
            padding-bottom: 0.5rem;
        }

        .summary-tables {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
        }

        .summary-table {
            width: 100%;
            border-collapse: collapse;
            color: var(--text-color);
            font-size: 0.95rem;
        }

        .summary-table th,
        .summary-table td {
            padding: 0.75rem;
            text-align: left;
            border-bottom: 1px solid var(--border-color);
        }

        .summary-table th {
            background-color: #f8f9fa;
            font-weight: 700;
        }

        .summary-table tfoot tr {
            font-weight: 700;
            border-top: 2px solid var(--text-color);
        }

        .summary-table .amount {
            text-align: right;
            font-weight: 500;
            font-family: monospace;
        }

        .summary-table h4 {
            color: var(--text-color);
            margin-bottom: 1rem;
        }

        /* Search Highlight Styles */
        .search-highlight {
            font-weight: 700;
            background-color: #fff3cd;
            padding: 0 0.15rem;
            border-radius: 3px;
        }

        /* Tippy Tooltip Styles */
        .tippy-box[data-theme~='light'] {
            background-color: var(--card-background);
            color: var(--text-color);
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            font-size: 0.95rem;
        }

        .tippy-box[data-theme~='light'][data-placement^='top']>.tippy-arrow::before {
            border-top-color: var(--card-background);
        }

        .tippy-box[data-theme~='light'][data-placement^='bottom']>.tippy-arrow::before {
            border-bottom-color: var(--card-background);
        }

        .tippy-content {
            padding: 0.5rem 0.75rem;
        }

        /* Drag & Drop Styles */
        .drag-over {
            border: 2px dashed var(--primary-color);
            background-color: #e9f5ff;
            border-radius: var(--border-radius);
        }

        /* ポップアップメッセージのスタイル */
        .popup-message {
            display: none;
            /* 初期状態では非表示 */
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(15, 23, 42, 0.55);
            backdrop-filter: blur(2px);
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

        .popup-content {
            width: 90%;
            max-width: 420px;
            padding: 1.5rem;
            text-align: center;
        }

        .popup-content p {
            font-size: 0.95rem;
            margin: 0 0 0.5rem 0;
        }

        .popup-content button {
            margin-top: 0.75rem;
            padding: 0.65rem 1.25rem;
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: var(--border-radius);
            cursor: pointer;
            font-weight: 700;
            font-size: 0.95rem;
            transition: background-color 0.2s, transform 0.1s;
        }

        .popup-content button:hover {
            background-color: var(--primary-hover);
            transform: translateY(-2px);
        }

        .initial-balance-editor {
            font-size: 2rem;
            font-weight: 700;
            color: var(--text-color);
            border: 2px solid var(--primary-color);
            border-radius: var(--border-radius);
            padding: 0.25rem 0.75rem;
            margin: 0;
            font-family: inherit;
            background-color: #e9f5ff;
            width: 100%;
            box-sizing: border-box;
            text-align: center;
        }

        .initial-balance-editor:focus {
            outline: none;
            background-color: white;
        }

        /* New Data Modal - Radio Toggle */
        .radio-toggle-group {
            display: flex;
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            overflow: hidden;
        }

        .radio-toggle-group input[type="radio"] {
            display: none;
        }

        .radio-toggle-group label {
            flex: 1;
            text-align: center;
            padding: 0.75rem 1rem;
            cursor: pointer;
            background-color: #f8f9fa;
            color: var(--subtle-text-color);
            transition: background-color 0.2s, color 0.2s;
            font-weight: 500;
        }

        .radio-toggle-group input[type="radio"]:checked+label {
            background-color: var(--primary-color);
            color: white;
            font-weight: 700;
        }

        .radio-toggle-group label:not(:last-of-type) {
            border-right: 1px solid var(--border-color);
        }

        /* Add Year Modal - Months Checkbox Grid */
        .months-checkbox-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0.75rem;
            background-color: #f8f9fa;
            padding: 1rem;
            border-radius: var(--border-radius);
            border: 1px solid var(--border-color);
        }

        #user-name-container {
            position: relative;
        }

        #user-name-display {
            font-size: 1.5rem;
            font-weight: 500;
            color: var(--subtle-text-color);
            margin: 0;
            padding: 0.25rem 0.75rem;
            border-radius: var(--border-radius);
            transition: background-color 0.2s;
            white-space: nowrap;
            /* Prevent wrapping */
            flex-shrink: 1;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        body.edit-mode #user-name-display {
            background-color: #e9ecef;
        }

        .user-name-edit-field {
            font-size: 1.5rem;
            font-weight: 500;
            color: var(--text-color);
            border: 2px solid var(--primary-color);
            border-radius: var(--border-radius);
            padding: 0.25rem 0.75rem;
            margin: 0;
            font-family: inherit;
            background-color: #e9f5ff;
            width: 100%;
            box-sizing: border-box;
            max-width: 200px;
            /* Limit width */
        }

        .user-name-edit-field:focus {
            outline: none;
            background-color: white;
        }

        /* Category Settings Modal */
        #category-input {
            width: 100%;
            padding: 0.75rem 1rem;
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            box-sizing: border-box;
            font-size: 1rem;
            resize: vertical;
            min-height: 150px;
        }

        /* Toggle Switch Styles */
        .toggle-switch-group {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1.5rem;
            padding: 0.75rem 0;
            border-bottom: 1px solid var(--border-color);
        }

        .toggle-switch-group label {
            margin-bottom: 0;
            font-weight: normal;
        }

        .encryption-password-fields[hidden] {
            display: none;
        }

        .settings-help-text {
            margin: -0.25rem 0 1rem;
            color: var(--subtle-text-color);
            font-size: 0.85rem;
            line-height: 1.5;
        }

        .switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
        }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            -webkit-transition: .4s;
            transition: .4s;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            -webkit-transition: .4s;
            transition: .4s;
        }

        input:checked+.slider {
            background-color: var(--primary-color);
        }

        input:focus+.slider {
            box-shadow: 0 0 1px var(--primary-color);
        }

        input:checked+.slider:before {
            -webkit-transform: translateX(26px);
            -ms-transform: translateX(26px);
            transform: translateX(26px);
        }

        /* Rounded sliders */
        .slider.round {
            border-radius: 34px;
        }

        .slider.round:before {
            border-radius: 50%;
        }

        .settings-section {
            margin-bottom: 2rem;
            padding-bottom: 1.5rem;
            border-bottom: 1px solid #eee;
        }

        .settings-section:last-of-type {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }

        .settings-section h3 {
            color: var(--primary-color);
            margin-top: 0;
            margin-bottom: 1.5rem;
            font-size: 1.05rem;
        }

        #settings-modal .modal-content {
            max-height: 90vh;
            overflow-y: auto;
        }

        /* Password Overlay Styles */
        .password-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            padding: 1.25rem;
            background: rgba(15, 23, 42, 0.68);
            backdrop-filter: blur(8px);
            display: none;
            /* Initially hidden */
            justify-content: center;
            align-items: center;
            z-index: 2000;
            transition: opacity 0.5s;
            box-sizing: border-box;
        }

        .password-overlay.visible {
            display: flex;
        }

        .password-card {
            padding: 1.75rem;
            text-align: left;
            width: 90%;
            max-width: 460px;
            background: #ffffff;
            border: 1px solid rgba(148, 163, 184, 0.28);
            border-radius: 18px;
            box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);
            box-sizing: border-box;
        }

        .password-card-header {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr);
            gap: 0.9rem;
            align-items: start;
            margin-bottom: 1.35rem;
        }

        .password-card h2 {
            margin: 0 0 0.3rem 0;
            font-size: 1.32rem;
            line-height: 1.35;
            color: var(--text-color);
        }

        .password-card p {
            margin: 0;
            color: var(--subtle-text-color);
            font-size: 0.95rem;
            line-height: 1.65;
        }

        .password-input-group {
            margin-bottom: 1rem;
        }

        .password-input-group label {
            display: block;
            margin-bottom: 0.45rem;
            color: var(--text-color);
            font-size: 0.9rem;
            font-weight: 700;
        }

        .password-input-shell {
            position: relative;
        }

        .password-input-group input {
            width: 100%;
            min-height: 54px;
            padding: 1.05rem 3.1rem 0.9rem 1rem;
            border: 1px solid #cbd5e1;
            border-radius: 12px;
            font-size: 1rem;
            box-sizing: border-box;
            background-color: #ffffff;
            color: var(--text-color);
            position: relative;
            z-index: 1;
        }

        .password-input-group input:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.16);
        }

        .password-visibility-toggle {
            position: absolute;
            right: 0.85rem;
            top: 50%;
            transform: translateY(-50%);
            width: 2.2rem;
            height: 2.2rem;
            color: var(--subtle-text-color);
            z-index: 2;
            padding: 0;
            border: 0;
            background: transparent;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 999px;
        }

        .password-visibility-toggle:hover {
            background: #f1f5f9;
            color: var(--primary-color);
        }

        .password-visibility-toggle svg {
            width: 1.25rem;
            height: 1.25rem;
            flex: 0 0 auto;
        }

        .password-error-message {
            color: var(--expenditure-color);
            min-height: 1.5em;
            margin: -0.45rem 0 0.9rem 0;
            font-weight: 700;
            line-height: 1.5;
        }

        .password-actions {
            display: grid;
            gap: 0.75rem;
        }

        .password-submit-button {
            width: 100%;
            padding: 1rem;
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: 12px;
            font-size: 1rem;
            font-weight: 700;
            cursor: pointer;
            transition: background-color 0.2s, transform 0.1s;
        }

        .password-submit-button:hover {
            background-color: var(--primary-hover);
            transform: translateY(-2px);
        }

        .password-cancel-button {
            width: 100%;
            padding: 0.9rem;
            border: 1px solid var(--border-color);
            border-radius: 12px;
            background: #ffffff;
            color: var(--text-color);
            font-weight: 600;
            cursor: pointer;
        }

        .password-cancel-button:hover {
            background: var(--background-color);
        }

        .password-footer {
            margin-top: 1rem;
            text-align: center;
        }

        .password-footer a {
            color: var(--primary-color);
            text-decoration: none;
            font-weight: 500;
            font-size: 0.9rem;
        }

        .password-footer a:hover {
            text-decoration: underline;
        }

        #bulk-add-textarea {
            width: 100%;
            padding: 0.75rem 1rem;
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            box-sizing: border-box;
            font-size: 1rem;
            font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
            resize: vertical;
            min-height: 200px;
        }

        /* Responsive Header Adjustments */
        @media (max-width: 768px) {

            /* Header optimization */
            header {
                padding: 0.5rem;
                gap: 0.5rem;
                flex-direction: row;
                flex-wrap: wrap;
                align-items: center;
                justify-content: center;
            }

            h1 {
                font-size: 1.3rem;
                margin: 0;
                flex-shrink: 0;
            }

            .header-left {
                gap: 0.35rem;
                flex-direction: row;
                align-items: center;
                width: 100%;
                order: 1;
                justify-content: center;
            }

            #user-name-display {
                font-size: 1rem;
                padding: 0.15rem 0.5rem;
                flex-shrink: 1;
                min-width: 50px;
            }

            #search-box {
                padding: 0.5rem 0.75rem;
                font-size: 1rem;
                width: auto;
                flex: 1;
                min-width: 80px;
                max-width: 200px;
                margin-top: 0;
            }

            .header-controls {
                gap: 0.35rem;
                overflow-x: scroll;
                overflow-y: hidden;
                width: 100%;
                order: 2;
                justify-content: flex-start;
                padding: 0.25rem 0;
                max-width: 100%;
                -webkit-overflow-scrolling: touch;
            }

            .header-controls::-webkit-scrollbar {
                height: 6px;
            }

            .header-controls::-webkit-scrollbar-track {
                background: var(--background-color);
            }

            .header-controls::-webkit-scrollbar-thumb {
                background: var(--border-color);
                border-radius: 3px;
            }

            .header-controls button {
                padding: 0.45rem 0.6rem;
                font-size: 0.75rem;
                flex-shrink: 0;
                min-width: auto;
            }

            /* Main container */
            #app-container {
                max-width: 100%;
                margin: 1rem auto;
                padding: 0;
                overflow-x: hidden;
            }

            /* Cards and sections */
            .total-summary-card {
                padding: 1rem;
                margin-bottom: 1.5rem;
            }

            .total-summary-card h2 {
                font-size: 1.3rem;
                margin-bottom: 1rem;
            }

            .summary-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 1rem;
            }

            .summary-grid-item .label {
                font-size: 0.8rem;
            }

            .summary-grid-item .value {
                font-size: 1.4rem;
            }

            /* Year sections */
            .year-section {
                margin-bottom: 1.5rem;
                padding: 0 0.5rem;
            }

            .year-header {
                gap: 0.5rem;
                margin-bottom: 1rem;
                padding-bottom: 0.5rem;
            }

            .year-title {
                font-size: 1.4rem;
            }

            .year-title-editor {
                font-size: 1.2rem;
            }

            /* Month grid */
            .months-grid {
                display: grid;
                grid-template-columns: 1fr;
                /* 1列レイアウトに変更 */
                gap: 1rem;
                overflow-x: hidden;
                /* 横スクロールを無効化 */
                padding: 0;
                margin: 0;
            }

            .month-card {
                width: 100%;
                min-width: 0;
                /* min-widthをリセット */
                padding: 1rem;
                border-top-width: 4px;
                flex-shrink: 1;
                box-sizing: border-box;
                /* paddingをwidthに含める */
            }

            .month-title {
                font-size: 1.2rem;
            }

            .final-balance {
                font-size: 1.1rem;
                margin-top: 0.75rem;
                padding-top: 0.75rem;
            }

            /* List items */
            .income-section h4,
            .expenditure-section h4 {
                font-size: 1rem;
                margin-bottom: 0.5rem;
            }

            li {
                padding: 0.6rem 0.5rem;
                font-size: 0.9rem;
            }

            li span:first-child {
                padding-right: 0.75rem;
            }

            /* Chart */
            .chart {
                height: 20px;
            }

            /* Modal improvements */
            .modal-overlay {
                padding: 1rem;
                align-items: center;
                /* 中央揃え */
            }

            .modal-content {
                width: 95%;
                max-width: 450px;
                padding: 1rem;
                max-height: calc(100vh - 2rem);
                overflow-y: auto;
                border-radius: 12px;
            }

            .modal-content.wide {
                width: 95%;
                max-width: 95%;
            }

            .modal-header {
                margin-bottom: 1rem;
                padding-bottom: 0.75rem;
            }

            .modal-header h2 {
                font-size: 1.2rem;
            }

            .form-group {
                margin-bottom: 1rem;
            }

            .form-group label {
                font-size: 0.95rem;
                margin-bottom: 0.4rem;
            }

            .form-group input,
            .form-group select {
                padding: 0.65rem 0.75rem;
                font-size: 1rem;
            }

            .form-actions {
                margin-top: 1.5rem;
                flex-direction: column-reverse;
                gap: 0.5rem;
            }

            .form-actions button {
                width: 100%;
                padding: 0.7rem;
                font-size: 0.95rem;
            }

            /* Bulk edit and summary */
            .bulk-edit-columns,
            .summary-tables {
                grid-template-columns: 1fr;
                gap: 1.5rem;
            }

            .bulk-edit-column h4 {
                font-size: 1rem;
            }

            /* Checkbox grids */
            .months-checkbox-grid {
                grid-template-columns: repeat(3, 1fr);
                gap: 0.5rem;
                padding: 0.75rem;
            }

            .month-checkbox-item {
                margin-bottom: 0.4rem;
            }

            .month-checkbox-item input[type="checkbox"] {
                width: 1rem;
                height: 1rem;
                margin-right: 0.5rem;
            }

            .month-checkbox-item label {
                font-size: 0.85rem;
            }

            /* Settings */
            .settings-section {
                margin-bottom: 1.5rem;
                padding-bottom: 1rem;
            }

            .settings-section h3 {
                font-size: 1.2rem;
                margin-bottom: 1rem;
            }
        }

        @media (max-width: 600px) {
            body {
                font-size: 14px;
            }

            header {
                padding: 0.4rem 0.5rem;
                gap: 0.4rem;
            }

            h1 {
                font-size: 1.2rem;
            }

            .header-controls {
                gap: 0.3rem;
            }

            .header-controls button {
                padding: 0.4rem 0.5rem;
                font-size: 0.7rem;
                min-width: 60px;
            }

            #app-container {
                padding: 0 0.5rem;
                margin: 0.75rem auto;
            }

            .total-summary-card {
                padding: 0.75rem;
                margin-bottom: 1rem;
            }

            .total-summary-card h2 {
                font-size: 1.1rem;
                margin-bottom: 0.75rem;
            }

            .summary-grid {
                gap: 0.75rem;
            }

            .summary-grid-item .label {
                font-size: 0.75rem;
            }

            .summary-grid-item .value {
                font-size: 1.2rem;
            }

            .year-title {
                font-size: 1.2rem;
            }

            .month-card {
                padding: 0.8rem;
            }

            .month-title {
                font-size: 1.1rem;
            }

            .modal-content {
                padding: 0.75rem;
            }

            .modal-header h2 {
                font-size: 1.1rem;
            }

            .form-actions button {
                padding: 0.6rem;
                font-size: 0.9rem;
            }

            .months-checkbox-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 480px) {
            body {
                font-size: 13px;
            }

            header {
                padding: 0.3rem 0.4rem;
                gap: 0.3rem;
            }

            h1 {
                font-size: 1.1rem;
                margin: 0;
            }

            #user-name-display {
                font-size: 0.9rem;
                padding: 0.1rem 0.4rem;
            }

            .header-left {
                gap: 0.25rem;
            }

            #search-box {
                padding: 0.4rem 0.6rem;
                font-size: 0.95rem;
                margin-top: 0.25rem;
            }

            .header-controls {
                gap: 0.25rem;
            }

            .header-controls button {
                padding: 0.35rem 0.4rem;
                font-size: 0.65rem;
                min-width: 55px;
                white-space: normal;
                word-break: break-word;
            }

            #app-container {
                padding: 0 0.35rem;
                margin: 0.5rem auto;
            }

            .total-summary-card {
                padding: 0.5rem;
                margin-bottom: 0.75rem;
            }

            .total-summary-card h2 {
                font-size: 1rem;
                margin-bottom: 0.5rem;
            }

            .summary-grid {
                gap: 0.5rem;
            }

            .summary-grid-item .label {
                font-size: 0.7rem;
            }

            .summary-grid-item .value {
                font-size: 1rem;
            }

            .year-section {
                margin-bottom: 1rem;
            }

            .year-header {
                gap: 0.3rem;
                margin-bottom: 0.75rem;
                padding-bottom: 0.3rem;
            }

            .year-title {
                font-size: 1.6rem !important;
                margin: 0;
            }

            .year-title-editor {
                font-size: 1rem;
                padding: 0.15rem 0.5rem;
            }

            .months-grid {
                grid-auto-flow: column;
                /* 横並びにする */
                grid-auto-columns: 90vw;
                /* カードの幅を画面幅の90%に */
                gap: 0.6rem;
                overflow-x: auto;
                /* 横スクロールを有効化 */
                overflow-y: hidden;
                padding: 0.6rem;
                margin: 0 -0.35rem;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
                /* Hide scrollbar */
            }

            .months-grid::-webkit-scrollbar {
                display: none;
                /* Hide scrollbar */
            }

            .month-card {
                width: 100%;
                /* 親要素(grid-auto-columns)の幅に合わせる */
                min-width: 0;
                padding: 0.7rem;
                border-top-width: 3px;
                flex-shrink: 0;
                box-sizing: border-box;
            }

            .month-title {
                font-size: 1rem;
            }

            .final-balance {
                font-size: 1rem;
                margin-top: 0.5rem;
                padding-top: 0.5rem;
            }

            .summary-item {
                font-size: 0.95rem;
                margin-bottom: 0.35rem;
            }

            .income-section h4,
            .expenditure-section h4 {
                font-size: 0.95rem;
                margin-bottom: 0.4rem;
            }

            li {
                padding: 0.5rem 0.4rem;
                font-size: 0.85rem;
            }

            li span:first-child {
                padding-right: 0.5rem;
            }

            .chart {
                height: 18px;
            }

            .modal-overlay {
                padding: 0.5rem;
                align-items: center;
                /* 中央揃え */
            }

            .modal-content {
                width: 95%;
                max-width: 95%;
                padding: 0.75rem;
                max-height: calc(100vh - 1rem);
                border-radius: 10px;
            }

            .modal-header {
                margin-bottom: 0.75rem;
                padding-bottom: 0.5rem;
            }

            .modal-header h2 {
                font-size: 1.05rem;
            }

            .close-btn {
                font-size: 1.5rem;
            }

            .delete-btn {
                padding: 0.4rem 0.8rem;
                font-size: 0.8rem;
            }

            .form-group {
                margin-bottom: 0.75rem;
            }

            .form-group label {
                font-size: 0.9rem;
                margin-bottom: 0.3rem;
            }

            .form-group input,
            .form-group select {
                padding: 0.6rem 0.6rem;
                font-size: 1rem;
            }

            .form-actions {
                margin-top: 1rem;
            }

            .form-actions button {
                padding: 0.6rem;
                font-size: 0.9rem;
            }

            .months-checkbox-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 0.4rem;
                padding: 0.5rem;
            }

            .month-checkbox-item {
                margin-bottom: 0.3rem;
            }

            .month-checkbox-item input[type="checkbox"] {
                width: 0.9rem;
                height: 0.9rem;
                margin-right: 0.4rem;
            }

            .month-checkbox-item label {
                font-size: 0.8rem;
            }

            .notes-content {
                padding: 0.5rem;
                min-height: 30px;
                font-size: 0.85rem;
            }

            .notes-editor {
                padding: 0.5rem;
                min-height: 50px;
                font-size: 0.85rem;
            }

            .control-btn {
                padding: 0.3rem;
                min-width: 36px;
                min-height: 36px;
            }

            .control-btn svg {
                width: 18px;
                height: 18px;
            }

            .edit-controls {
                gap: 0.3rem;
            }

            .toggle-switch-group {
                padding: 0.5rem 0;
                margin-bottom: 1rem;
            }

            .switch {
                width: 50px;
                height: 28px;
            }

            .slider:before {
                height: 22px;
                width: 22px;
            }

            input:checked+.slider:before {
                -webkit-transform: translateX(22px);
                -ms-transform: translateX(22px);
                transform: translateX(22px);
            }

            #category-input {
                min-height: 100px;
                padding: 0.5rem;
                font-size: 0.9rem;
            }

            .radio-toggle-group label {
                padding: 0.5rem 0.75rem;
                font-size: 0.8rem;
            }

            /* Touchable element minimum size */
            button,
            input[type="button"],
            input[type="submit"] {
                min-height: 44px;
            }

            .control-btn {
                min-width: 44px;
                min-height: 44px;
            }

            /* Optimize scrollable areas */
            .months-checkbox-container {
                max-height: 250px;
            }

            #summary-content,
            #category-summary-content {
                max-height: 70vh;
            }
        }

        /* Responsive Styles */
        @media (max-width: 1200px) {
            .months-grid {
                grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
                gap: 1.5rem;
            }
        }

        @media (max-width: 768px) {
            header {
                padding: 0.75rem 1rem;
            }

            .header-bar {
                flex-wrap: wrap;
                gap: 0.5rem;
            }

            .header-title {
                font-size: 1.1rem;
            }

            #user-name-display {
                font-size: 0.85rem;
            }

            #search-box {
                max-width: 100%;
                width: 100%;
                box-sizing: border-box;
                order: 10;
            }

            .header-edit-controls {
                order: 5;
                width: 100%;
                overflow-x: auto;
                scrollbar-width: none;
                gap: 0.4rem;
            }

            .header-edit-controls::-webkit-scrollbar {
                display: none;
            }

            .header-edit-btn {
                padding: 0.45rem 0.7rem;
                font-size: 0.8rem;
                min-height: 38px;
            }

            #app-container {
                margin: 1rem auto;
                padding: 0 1rem;
                overflow-x: hidden;
                /* Prevent accidental horizontal scroll */
            }

            .total-summary-card {
                padding: 1rem;
                margin-bottom: 1.5rem;
            }

            .summary-grid {
                grid-template-columns: repeat(2, 1fr);
                /* Simpler 2-column layout */
                gap: 1rem;
            }

            .summary-grid-item .value {
                font-size: 1.4rem;
            }

            .year-title {
                font-size: 1.8rem;
            }

            .year-title-editor {
                font-size: 1.8rem;
            }

            .months-grid {
                display: grid;
                grid-auto-flow: column;
                grid-auto-columns: 85vw;
                /* Card width */
                gap: 0.75rem;
                overflow-x: auto;
                overflow-y: hidden;
                padding: 0.75rem;
                margin: 0 -1rem;
                /* Adjust margin based on #app-container padding */
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
                /* Hide scrollbar but keep it scrollable */
            }

            .months-grid::-webkit-scrollbar {
                display: none;
                /* Hide scrollbar for Chrome, Safari, and Opera */
            }

            .month-card {
                width: 100%;
                min-width: 0;
                padding: 1rem;
                border-top-width: 4px;
                flex-shrink: 0;
                box-sizing: border-box;
            }

            .month-title {
                font-size: 1.5rem;
            }

            .final-balance {
                font-size: 1.25rem;
            }

            .summary-item {
                font-size: 1rem;
            }

            .modal-content {
                width: 95%;
                padding: 1.5rem;
                margin: 1rem;
            }

            .modal-content.wide {
                width: 95%;
                max-width: none;
                /* wideを解除 */
                margin: 1rem;
                /* 中央配置を維持しつつ余白確保 */
            }

            .modal-header h2 {
                font-size: 1.5rem;
            }

            .form-group label {
                font-size: 0.9rem;
            }

            .form-group input,
            .form-group select {
                padding: 0.6rem 0.8rem;
                font-size: 0.9rem;
            }

            .form-actions button {
                padding: 0.6rem 1rem;
                font-size: 0.9rem;
            }

            .summary-tables {
                grid-template-columns: 1fr;
                gap: 1.5rem;
            }

            .bulk-edit-columns {
                grid-template-columns: 1fr;
                gap: 1rem;
            }

            .months-checkbox-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 0.5rem;
            }
        }

        @media (max-width: 480px) {
            h1 {
                font-size: 1.5rem;
            }

            .summary-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .total-summary-card h2 {
                font-size: 1.5rem;
            }

            .year-header {
                flex-direction: column;
                align-items: flex-start;
            }

            .modal-content.wide .bulk-edit-columns {
                grid-template-columns: 1fr;
                gap: 1rem;
            }

            .modal-content.wide .months-checkbox-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 600px) {
            .modal-content.wide {
                width: calc(100% - 1rem);
                max-height: 90vh;
                overflow-y: auto;
                padding: 1.25rem;
            }

            .modal-content.wide .modal-header h2 {
                font-size: 1.2rem;
            }

            .modal-content.wide .bulk-edit-columns {
                grid-template-columns: 1fr;
                gap: 1rem;
            }

            .modal-content.wide .bulk-edit-column {
                padding: 0.25rem 0;
            }

            .modal-content.wide .months-checkbox-container {
                max-height: 50vh;
                overflow-y: auto;
                padding-right: 0.5rem;
            }

            .modal-content.wide .month-checkbox-item {
                padding: 0.35rem 0;
                border-bottom: 1px solid var(--border-color);
            }

            .modal-content.wide .month-checkbox-item:last-child {
                border-bottom: none;
            }
        }

        /* ========================================
           データ分析モーダル スタイル
           ======================================== */

        /* データ分析モーダル（大きめ表示） */
        #data-analysis-modal .modal-content.wide {
            width: min(1120px, 94vw);
            max-width: 1120px;
            height: min(820px, 86vh);
            max-height: min(820px, 86vh);
            overflow: hidden;
        }

        #data-analysis-modal .analysis-content .chart-container {
            height: 100%;
            min-height: 0;
        }

        #data-analysis-modal #breakdown-chart-container {
            min-height: 0;
        }

        @media (max-width: 768px) {
            #data-analysis-modal .modal-content.wide {
                height: min(760px, 88vh);
                max-height: min(760px, 88vh);
            }

            #data-analysis-modal .analysis-content .chart-container {
                height: 100%;
            }

            #data-analysis-modal #breakdown-chart-container {
                min-height: 0;
            }
        }

        @media (max-width: 480px) {
            #data-analysis-modal .modal-content.wide {
                width: 96vw;
                height: 88vh;
                max-height: 88vh;
            }

            #data-analysis-modal .analysis-content .chart-container {
                height: 100%;
            }
        }

        /* データ分析ボタン */
        #data-analysis-button {
            background: #ffffff;
        }

        #data-analysis-button:hover {
            background: #eff6ff;
        }

        /* タブ切り替え */
        .analysis-tabs {
            display: flex;
            gap: 0.5rem;
            margin-bottom: 0;
            background: var(--background-color);
            padding: 0.5rem;
            border-radius: var(--border-radius);
        }

        .analysis-tab {
            flex: 1;
            padding: 0.75rem 1rem;
            border: none;
            background: transparent;
            cursor: pointer;
            font-size: 0.95rem;
            font-weight: 600;
            color: var(--subtle-text-color);
            border-radius: 10px;
            transition: all 0.3s ease;
        }

        .analysis-tab:hover {
            background: rgba(37, 99, 235, 0.1);
            color: var(--primary-color);
        }

        .analysis-tab.active {
            background: var(--primary-color);
            color: white;
            box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
        }

        /* グラフコンテナ */
        .analysis-content {
            min-height: 0;
            margin-bottom: 0;
        }

        .analysis-content .chart-container {
            position: relative;
            height: 350px;
            background: var(--background-color);
            border-radius: var(--border-radius);
            padding: 1rem;
            box-sizing: border-box;
        }

        #breakdown-chart-container {
            height: auto;
            min-height: 0;
            padding-bottom: 1rem;
        }

        .breakdown-charts {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
            height: 100%;
            margin-bottom: 0;
            min-height: 0;
        }

        .breakdown-chart-item {
            min-height: 0;
            text-align: center;
            background: white;
            border-radius: var(--border-radius);
            padding: 0.75rem;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .breakdown-chart-item h4 {
            margin: 0 0 0.75rem 0;
            color: var(--text-color);
            font-size: 1rem;
        }

        .breakdown-chart-item canvas {
            flex: 1 1 auto;
            min-height: 0;
            max-height: none !important;
        }

        /* 統計サマリー */
        .analysis-stats {
            background: #f8fafc;
            border-radius: var(--border-radius);
            padding: 1rem;
            margin-top: 0;
            position: relative;
            z-index: 1;
            border: 1px solid var(--border-color);
        }

        .analysis-stats h4 {
            margin: 0 0 0.75rem 0;
            color: var(--text-color);
            font-size: 1rem;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1rem;
        }

        .stat-card {
            background: white;
            padding: 1rem;
            border-radius: 12px;
            text-align: center;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }

        .stat-label {
            font-size: 0.85rem;
            color: var(--subtle-text-color);
            margin-bottom: 0.5rem;
        }

        .stat-value {
            font-size: 1.2rem;
            font-weight: 700;
            color: var(--text-color);
        }

        .stat-value.income {
            color: var(--income-color);
        }

        .stat-value.expenditure {
            color: var(--expenditure-color);
        }

        /* レスポンシブ: タブレット */
        @media (max-width: 768px) {
            .analysis-tabs {
                flex-wrap: wrap;
            }

            .analysis-tab {
                font-size: 0.85rem;
                padding: 0.6rem 0.75rem;
            }

            .chart-container {
                height: 300px;
                padding: 0.75rem;
            }

            .breakdown-charts {
                grid-template-columns: 1fr;
                gap: 1.5rem;
            }

            #breakdown-chart-container {
                min-height: auto;
                padding-bottom: 1rem;
            }

            .breakdown-chart-item {
                min-height: 200px;
                padding: 0.75rem;
            }

            .breakdown-chart-item canvas {
                max-height: 180px !important;
            }

            .breakdown-chart-item h4 {
                font-size: 0.95rem;
                margin-bottom: 0.5rem;
            }

            .analysis-stats {
                margin-top: 1rem;
            }

            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .stat-card {
                padding: 0.75rem;
            }

            .stat-value {
                font-size: 1rem;
            }
        }

        /* レスポンシブ: スマホ */
        @media (max-width: 480px) {
            .analysis-tabs {
                gap: 0.25rem;
                padding: 0.25rem;
            }

            .analysis-tab {
                font-size: 0.75rem;
                padding: 0.4rem 0.3rem;
            }

            .chart-container {
                height: 220px;
                padding: 0.5rem;
            }

            .breakdown-chart-item {
                min-height: 220px;
            }

            .breakdown-chart-item canvas {
                max-height: 200px;
            }

            .breakdown-chart-item h4 {
                font-size: 0.85rem;
                margin-bottom: 0.5rem;
            }

            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 0.5rem;
            }

            .stat-card {
                padding: 0.5rem;
            }

            .stat-label {
                font-size: 0.7rem;
            }

            .stat-value {
                font-size: 0.85rem;
            }

            .analysis-stats {
                padding: 0.75rem;
            }

            .analysis-stats h4 {
                font-size: 0.9rem;
            }
        }

        @media screen {

            body,
            body * {
                font-size: var(--base-font-size) !important;
            }
        }

        /* Unified popup and modal design */
        .modal-overlay,
        .popup-message,
        .password-overlay {
            padding: 1.25rem;
            background: rgba(15, 23, 42, 0.68);
            backdrop-filter: blur(8px);
            box-sizing: border-box;
        }

        .modal-content,
        .popup-content,
        .password-card {
            width: min(92vw, 520px);
            max-height: min(86vh, 760px);
            overflow: hidden;
            padding: 0;
            background: #ffffff;
            border: 1px solid rgba(15, 23, 42, 0.1);
            border-radius: 16px;
            box-shadow: 0 24px 60px rgba(15, 23, 42, 0.24);
            color: var(--text-color);
        }

        .password-card {
            width: min(92vw, 460px);
            max-height: none;
            overflow: visible;
            border: 1px solid rgba(148, 163, 184, 0.28);
            border-radius: 18px;
            box-shadow: 0 28px 80px rgba(15, 23, 42, 0.32);
        }

        .modal-content.wide {
            width: min(94vw, 980px);
            max-width: 980px;
        }

        .modal-content {
            display: flex;
            flex-direction: column;
            min-height: 0;
        }

        #settings-modal .modal-content,
        #data-analysis-modal .modal-content.wide {
            max-height: min(86vh, 760px);
            overflow: hidden;
        }

        #settings-modal .modal-content {
            display: flex;
            flex-direction: column;
            overflow: hidden;
            scrollbar-width: none;
        }

        #settings-modal .modal-content::-webkit-scrollbar {
            display: none;
        }

        #settings-modal .settings-scroll {
            min-height: 0;
            overflow-y: auto;
            scrollbar-width: none;
        }

        #settings-modal .settings-scroll::-webkit-scrollbar {
            display: none;
        }

        #summary-modal .modal-content.wide,
        #category-summary-modal .modal-content.wide,
        #bulk-add-modal .modal-content.wide,
        #bulk-edit-modal .modal-content.wide,
        #add-year-modal .modal-content,
        #edit-months-modal .modal-content {
            max-height: min(86vh, 760px);
            overflow: hidden;
        }

        .modal-header {
            flex: 0 0 auto;
            display: flex;
            align-items: center;
            gap: 1rem;
            min-height: 64px;
            margin: 0;
            padding: 1rem 1.25rem;
            background: #f8fafc;
            border-bottom: 1px solid var(--border-color);
            border-radius: 16px 16px 0 0;
        }

        .modal-header h2,
        #modal-title,
        .password-card h2 {
            margin: 0;
            color: var(--text-color);
            font-size: 1.12rem !important;
            font-weight: 700;
            letter-spacing: 0;
        }

        .password-card h2 {
            font-size: 1.34rem !important;
            line-height: 1.35;
        }

        .close-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            flex: 0 0 auto;
            margin-left: auto;
            padding: 0;
            color: var(--subtle-text-color);
            background: #ffffff;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            font-size: 1.55rem !important;
            line-height: 1;
            opacity: 1;
            transition: background-color 0.2s, border-color 0.2s, color 0.2s;
        }

        .close-btn:hover {
            color: var(--expenditure-color);
            background: #fff1f2;
            border-color: rgba(239, 68, 68, 0.32);
            opacity: 1;
        }

        .close-btn:focus-visible,
        .form-actions button:focus-visible,
        .password-submit-button:focus-visible,
        .popup-content button:focus-visible,
        .analysis-tab:focus-visible {
            outline: 3px solid rgba(37, 99, 235, 0.28);
            outline-offset: 2px;
        }

        .modal-content>form,
        .modal-content>.bulk-edit-columns,
        .modal-content>#summary-content,
        .modal-content>#category-summary-content,
        .modal-content>.settings-section,
        .modal-content>.settings-scroll,
        .modal-content>.analysis-tabs,
        .modal-content>.analysis-content,
        #smartphone-warning-modal .modal-content>p {
            padding-left: 1.25rem;
            padding-right: 1.25rem;
        }

        .modal-content>form,
        .modal-content>.bulk-edit-columns,
        .modal-content>#summary-content,
        .modal-content>#category-summary-content,
        .modal-content>.settings-section,
        .modal-content>.settings-scroll,
        .modal-content>.analysis-content {
            padding-top: 1.2rem;
            padding-bottom: 1.2rem;
        }

        .modal-content>form,
        .modal-content>.bulk-edit-columns,
        .modal-content>#summary-content,
        .modal-content>#category-summary-content,
        .modal-content>.settings-section,
        .modal-content>.analysis-content {
            min-height: 0;
            overflow-y: auto;
            scrollbar-width: none;
        }

        .modal-content>form::-webkit-scrollbar,
        .modal-content>.bulk-edit-columns::-webkit-scrollbar,
        .modal-content>#summary-content::-webkit-scrollbar,
        .modal-content>#category-summary-content::-webkit-scrollbar,
        .modal-content>.settings-section::-webkit-scrollbar,
        .modal-content>.analysis-content::-webkit-scrollbar {
            display: none;
        }

        .modal-content>.settings-section+.settings-section {
            border-top: 1px solid var(--border-color);
        }

        #settings-modal .settings-section+.settings-section {
            margin-top: 1rem;
            padding-top: 1rem;
            border-top: 1px solid var(--border-color);
        }

        #settings-modal .modal-content>.settings-section {
            flex: 0 0 auto;
            overflow: visible;
        }

        .form-group {
            margin-bottom: 1rem;
        }

        .form-group label,
        .modal-content .form-group label {
            margin-bottom: 0.4rem;
            color: var(--text-color);
            font-size: 0.88rem !important;
            font-weight: 700;
        }

        .form-group input,
        .form-group select,
        .form-group textarea,
        .modal-content .form-group input,
        .modal-content .form-group select,
        .modal-content .form-group textarea {
            min-height: 44px;
            padding: 0.65rem 0.8rem;
            background: #f8fafc;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            font-family: inherit;
            font-size: 0.95rem !important;
            box-sizing: border-box;
        }

        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            background: #ffffff;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
        }

        .bulk-edit-columns {
            gap: 1rem;
        }

        .bulk-edit-column,
        .summary-year-section,
        .settings-section {
            border-radius: 12px;
        }

        .bulk-edit-column h4,
        .modal-content h3,
        .settings-section h3 {
            margin: 0 0 0.85rem;
            padding-bottom: 0.55rem;
            color: var(--primary-color);
            border-bottom: 1px solid var(--border-color);
            font-size: 0.98rem !important;
            font-weight: 700;
        }

        .months-checkbox-container,
        .months-checkbox-grid {
            background: #f8fafc;
            border: 1px solid var(--border-color);
            border-radius: 12px;
        }

        .form-actions {
            flex: 0 0 auto;
            margin: 1rem -1.25rem -1.2rem;
            padding: 1rem 1.25rem;
            background: #ffffff;
            border-top: 1px solid var(--border-color);
            border-radius: 0 0 16px 16px;
            display: flex;
            justify-content: flex-end;
            gap: 0.65rem;
        }

        .modal-content>.form-actions {
            margin: 0;
            padding: 1rem 1.25rem;
        }

        .form-actions button,
        .password-submit-button,
        .popup-content button {
            min-height: 42px;
            padding: 0.65rem 1.05rem;
            border-radius: 10px;
            border: 1px solid transparent;
            font-size: 0.92rem !important;
            font-weight: 700;
            transform: none;
            transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
        }

        .password-submit-button,
        .password-cancel-button {
            min-height: 48px;
            font-size: 0.98rem !important;
        }

        .form-actions button:hover,
        .password-submit-button:hover,
        .popup-content button:hover {
            transform: none;
        }

        .btn-primary,
        .password-submit-button,
        .popup-content button {
            background: var(--primary-color);
            color: #ffffff;
        }

        .btn-primary:hover,
        .password-submit-button:hover,
        .popup-content button:hover {
            background: var(--primary-hover);
            box-shadow: 0 8px 18px rgba(37, 99, 235, 0.18);
        }

        .btn-secondary {
            background: #ffffff;
            color: var(--text-color);
            border-color: var(--border-color) !important;
        }

        .btn-secondary:hover {
            background: #f8fafc;
            border-color: #cbd5e1 !important;
        }

        .btn-info {
            background: #0f766e;
            color: #ffffff;
        }

        .btn-info:hover {
            background: #115e59;
        }

        .delete-year-btn {
            min-height: 36px;
            padding: 0.45rem 0.75rem;
            border-radius: 10px;
            background: #fff1f2;
            color: var(--expenditure-color);
            border: 1px solid rgba(239, 68, 68, 0.28);
            transform: none;
        }

        .delete-year-btn:hover {
            background: #ffe4e6;
            transform: none;
        }

        /* Unified bulk edit/add modal layout */
        #bulk-add-modal .modal-content.wide,
        #bulk-edit-modal .modal-content.wide {
            width: min(94vw, 900px);
            max-width: 900px;
            height: min(720px, 86vh);
            max-height: min(720px, 86vh);
            display: grid;
            grid-template-rows: auto minmax(0, 1fr) auto;
            overflow: hidden;
        }

        #bulk-edit-modal #bulk-edit-form {
            display: contents;
        }

        #bulk-add-modal .modal-header,
        #bulk-edit-modal .modal-header {
            min-height: 60px;
        }

        #bulk-add-modal .bulk-edit-columns,
        #bulk-edit-modal .bulk-edit-columns {
            min-height: 0;
            margin: 0;
            padding: 1rem 1.25rem;
            display: grid;
            grid-template-columns: minmax(280px, 0.9fr) minmax(320px, 1.1fr);
            gap: 1rem;
            overflow: hidden;
        }

        #bulk-add-modal .bulk-edit-column,
        #bulk-edit-modal .bulk-edit-column {
            min-width: 0;
            min-height: 0;
            padding: 1rem;
            background: #ffffff;
            border: 1px solid var(--border-color);
            border-radius: 12px;
            box-shadow: none;
            display: flex;
            flex-direction: column;
        }

        #bulk-add-modal .bulk-edit-column h4,
        #bulk-edit-modal .bulk-edit-column h4 {
            flex: 0 0 auto;
            margin: 0 0 0.8rem;
            padding-bottom: 0.55rem;
            color: var(--text-color);
            border-bottom: 1px solid var(--border-color);
            font-size: 0.95rem !important;
        }

        #bulk-add-modal .form-group,
        #bulk-edit-modal .form-group {
            margin-bottom: 0.85rem;
        }

        #bulk-add-modal .form-group:last-child,
        #bulk-edit-modal .form-group:last-child {
            margin-bottom: 0;
        }

        #bulk-add-modal .radio-toggle-group,
        #bulk-edit-modal .radio-toggle-group {
            width: 100%;
        }

        #bulk-add-modal select,
        #bulk-add-modal input[type="search"],
        #bulk-edit-modal select,
        #bulk-edit-modal input[type="text"],
        #bulk-edit-modal input[type="number"] {
            width: 100%;
        }

        #bulk-add-modal #bulk-add-item-search {
            width: 100%;
            min-height: 42px;
            padding-top: 0.65rem;
            padding-right: 0.8rem;
            padding-bottom: 0.65rem;
            padding-left: 2.25rem;
            background-color: #ffffff;
            border: 1px solid var(--border-color);
            border-radius: 9px;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2364748b'%3E%3Cpath d='M9.5 3a6.5 6.5 0 0 1 5.17 10.44l4.45 4.44-1.24 1.24-4.44-4.45A6.5 6.5 0 1 1 9.5 3Zm0 1.75a4.75 4.75 0 1 0 0 9.5 4.75 4.75 0 0 0 0-9.5Z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: 0.75rem center;
            background-size: 1rem;
        }

        #bulk-add-modal .bulk-add-item-count {
            min-height: 1.25rem;
            margin: 0.35rem 0 0;
            color: var(--subtle-text-color);
            font-size: 0.78rem !important;
            line-height: 1.3;
            text-align: right;
        }

        #bulk-add-modal .month-checkbox-item {
            display: flex;
            align-items: center;
            gap: 0.55rem;
            min-height: 40px;
            margin: 0;
            padding: 0.55rem 0.65rem;
            background: #f8fafc;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            box-sizing: border-box;
        }

        #bulk-add-modal .bulk-edit-column>hr {
            width: 100%;
            margin: 0.75rem 0;
            border: 0;
            border-top: 1px solid var(--border-color);
        }

        #bulk-add-modal .months-checkbox-container,
        #bulk-edit-modal .months-checkbox-container {
            flex: 1 1 auto;
            min-height: 0;
            max-height: none;
            padding: 0.7rem;
            overflow-y: auto;
            background: #f8fafc;
            border: 1px solid var(--border-color);
            border-radius: 12px;
            scrollbar-width: thin;
            scrollbar-color: #cbd5e1 transparent;
        }

        #bulk-add-modal .months-checkbox-container::-webkit-scrollbar,
        #bulk-edit-modal .months-checkbox-container::-webkit-scrollbar {
            width: 8px;
            display: initial;
        }

        #bulk-add-modal .months-checkbox-container::-webkit-scrollbar-thumb,
        #bulk-edit-modal .months-checkbox-container::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 999px;
        }

        #bulk-add-modal .form-actions,
        #bulk-edit-modal .form-actions {
            grid-row: 3;
            margin: 0;
            padding: 0.85rem 1.25rem;
            background: #ffffff;
            border-top: 1px solid var(--border-color);
            border-radius: 0 0 16px 16px;
        }

        #bulk-add-modal .form-actions .btn-primary,
        #bulk-edit-modal .form-actions .btn-primary {
            min-width: 120px;
        }

        .popup-message {
            z-index: 3000;
        }

        .popup-content {
            padding: 1.25rem;
            text-align: left;
        }

        .app-dialog-content {
            max-width: 440px;
            padding: 1.5rem;
            text-align: left;
            border-radius: 18px;
        }

        .app-dialog-header {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 0.7rem;
        }

        .app-dialog-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 34px;
            height: 34px;
            flex: 0 0 34px;
            border-radius: 10px;
            background: #eff6ff;
            color: var(--primary-color);
            border: 1px solid rgba(37, 99, 235, 0.16);
            font-weight: 800;
            font-size: 1rem;
            line-height: 1;
        }

        .app-dialog-icon.danger {
            background: #fff1f2;
            color: var(--expenditure-color);
            border-color: rgba(239, 68, 68, 0.22);
        }

        .app-dialog-content h2 {
            margin: 0;
            color: var(--text-color);
            font-size: 1.18rem !important;
            line-height: 1.35;
            letter-spacing: 0;
        }

        .popup-content p {
            margin: 0;
            color: var(--text-color);
            line-height: 1.7;
            white-space: pre-line;
        }

        .app-dialog-actions {
            display: flex;
            justify-content: flex-end;
            gap: 0.65rem;
            margin-top: 1.25rem;
            padding-top: 1rem;
            border-top: 1px solid var(--border-color);
        }

        .popup-content button,
        .app-dialog-actions button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 96px;
            min-height: 42px;
            margin: 0;
            border-radius: 10px;
        }

        .app-dialog-cancel {
            background: #ffffff !important;
            color: var(--text-color) !important;
            border-color: var(--border-color) !important;
        }

        .app-dialog-cancel:hover {
            background: #f8fafc !important;
        }

        .app-dialog-primary.danger {
            background: var(--expenditure-color) !important;
            color: #ffffff !important;
        }

        .app-dialog-primary.danger:hover {
            background: #dc2626 !important;
        }

        .password-card {
            padding: 1.75rem;
            text-align: left;
        }

        .lock-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 52px;
            height: 52px;
            margin-bottom: 0;
            color: var(--primary-color);
            background: #eff6ff;
            border: 1px solid rgba(37, 99, 235, 0.16);
            border-radius: 14px;
        }

        .lock-icon svg {
            width: 30px;
            height: 30px;
            margin: 0;
        }

        .password-card p {
            margin: 0;
            color: var(--subtle-text-color);
        }

        .password-input-group {
            margin-bottom: 1rem;
        }

        .password-input-group input {
            min-height: 54px;
            padding: 1.05rem 3.1rem 0.9rem 1rem;
            background: #ffffff;
            border-color: #cbd5e1;
            border-radius: 12px;
            font-size: 1rem !important;
            padding-right: 3rem;
        }

        .password-visibility-toggle {
            right: 0.75rem;
        }

        .password-error-message {
            margin: -0.35rem 0 0.85rem;
            color: var(--expenditure-color);
            font-size: 0.88rem !important;
        }

        .password-footer {
            margin-top: 1rem;
        }

        .analysis-tabs {
            padding-top: 1rem;
            padding-bottom: 0;
            border-bottom: 1px solid var(--border-color);
        }

        .analysis-tab {
            min-height: 40px;
            border-radius: 10px 10px 0 0;
            font-weight: 700;
        }

        @media (max-width: 768px) {
            .modal-overlay,
            .popup-message,
            .password-overlay {
                padding: 0.75rem;
            }

            .modal-content,
            .popup-content,
            .password-card {
                width: 100%;
                max-height: calc(100vh - 1.5rem);
            }

            .password-card {
                padding: 1.35rem;
                max-height: none;
            }

            #settings-modal .modal-content,
            #data-analysis-modal .modal-content.wide {
                max-height: calc(100vh - 1.5rem);
            }

            .modal-header {
                min-height: 58px;
                padding: 0.85rem 1rem;
            }

            .modal-content>form,
            .modal-content>.bulk-edit-columns,
            .modal-content>#summary-content,
            .modal-content>#category-summary-content,
            .modal-content>.settings-section,
            .modal-content>.settings-scroll,
            .modal-content>.analysis-tabs,
            .modal-content>.analysis-content,
            #smartphone-warning-modal .modal-content>p {
                padding-left: 1rem;
                padding-right: 1rem;
            }

            .form-actions {
                margin-left: -1rem;
                margin-right: -1rem;
                padding: 0.85rem 1rem;
            }

            #bulk-add-modal .modal-content.wide,
            #bulk-edit-modal .modal-content.wide {
                width: 100%;
                height: min(760px, calc(100vh - 1.5rem));
                max-height: calc(100vh - 1.5rem);
            }

            #bulk-add-modal .bulk-edit-columns,
            #bulk-edit-modal .bulk-edit-columns {
                grid-template-columns: 1fr;
                gap: 0.75rem;
                padding: 0.85rem 1rem;
                overflow-y: auto;
                scrollbar-width: none;
            }

            #bulk-add-modal .bulk-edit-columns::-webkit-scrollbar,
            #bulk-edit-modal .bulk-edit-columns::-webkit-scrollbar {
                display: none;
            }

            #bulk-add-modal .bulk-edit-column,
            #bulk-edit-modal .bulk-edit-column {
                padding: 0.85rem;
            }

            #bulk-add-modal .months-checkbox-container,
            #bulk-edit-modal .months-checkbox-container {
                max-height: 240px;
                flex: 0 1 auto;
            }

            #bulk-add-modal .form-actions,
            #bulk-edit-modal .form-actions {
                margin: 0;
                padding: 0.85rem 1rem;
                display: grid;
                grid-template-columns: 1fr 1fr;
            }

            #bulk-edit-modal .form-actions {
                grid-template-columns: 1fr;
            }

            #bulk-add-modal .form-actions button,
            #bulk-edit-modal .form-actions button {
                width: 100%;
            }
        }

        /* Data analysis modal final layout guard */
        @keyframes analysisPanelEnter {
            from {
                opacity: 0;
                transform: translateY(8px) scale(0.99);
            }

            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        @keyframes analysisContentEnter {
            from {
                opacity: 0;
                transform: translateY(6px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        #data-analysis-modal.analysis-modal-enter .modal-content.wide {
            animation: analysisPanelEnter 220ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
        }

        #data-analysis-modal .modal-content.wide {
            display: grid;
            grid-template-rows: auto auto minmax(0, 1fr) auto;
            gap: 0;
            height: min(820px, 86vh);
            max-height: min(820px, 86vh);
            overflow: hidden;
        }

        #data-analysis-modal .analysis-tabs {
            display: flex;
            flex: 0 0 auto;
            gap: 0.5rem;
            margin: 0;
            padding: 0.9rem 1.25rem 0.75rem;
            background: #ffffff;
            border-bottom: 1px solid var(--border-color);
            border-radius: 0;
        }

        #data-analysis-modal .analysis-tab {
            min-height: 40px;
            border-radius: 10px;
        }

        #data-analysis-modal .analysis-content {
            min-height: 0;
            margin: 0;
            padding: 1rem 1.25rem;
            overflow: hidden;
        }

        #data-analysis-modal .analysis-content .chart-container {
            width: 100%;
            height: 100%;
            min-height: 0;
            margin: 0;
            padding: 1rem;
            box-sizing: border-box;
            overflow: hidden;
        }

        #data-analysis-modal .analysis-content .chart-container.is-active {
            animation: analysisContentEnter 180ms ease-out both;
        }

        #data-analysis-modal .analysis-content canvas {
            display: block;
            max-width: 100%;
            max-height: 100%;
        }

        #data-analysis-modal #breakdown-chart-container {
            height: 100%;
            min-height: 0;
        }

        #data-analysis-modal .breakdown-charts {
            height: 100%;
            min-height: 0;
            gap: 1rem;
        }

        #data-analysis-modal .breakdown-chart-item {
            min-height: 0;
        }

        #data-analysis-modal .analysis-stats {
            margin: 0;
            padding: 0.9rem 1.25rem 1rem;
            border-width: 1px 0 0;
            border-radius: 0 0 16px 16px;
            background: #f8fafc;
        }

        #data-analysis-modal .analysis-stats h4 {
            margin: 0 0 0.65rem;
            font-size: 0.95rem !important;
        }

        #data-analysis-modal .stats-grid {
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 0.65rem;
        }

        #data-analysis-modal .stat-card {
            min-width: 0;
            padding: 0.7rem;
            box-shadow: none;
            border: 1px solid var(--border-color);
        }

        #data-analysis-modal .stat-value {
            overflow-wrap: anywhere;
            font-size: 1rem !important;
        }

        @media (max-width: 768px) {
            #data-analysis-modal .modal-content.wide {
                height: min(760px, 88vh);
                max-height: min(760px, 88vh);
            }

            #data-analysis-modal .analysis-tabs {
                padding: 0.75rem 1rem 0.6rem;
            }

            #data-analysis-modal .analysis-content {
                padding: 0.75rem 1rem;
                overflow-y: auto;
                scrollbar-width: none;
            }

            #data-analysis-modal .analysis-content::-webkit-scrollbar {
                display: none;
            }

            #data-analysis-modal .breakdown-charts {
                grid-template-columns: 1fr;
            }

            #data-analysis-modal .stats-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 480px) {
            #data-analysis-modal .modal-content.wide {
                height: 88vh;
                max-height: 88vh;
            }

            #data-analysis-modal .analysis-tab {
                font-size: 0.78rem !important;
                padding: 0.45rem 0.3rem;
            }

            #data-analysis-modal .stat-card {
                padding: 0.55rem;
            }
        }

        /* Card readability */
        .months-grid {
            grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
            align-items: start;
        }

        .month-card {
            padding: 0.95rem;
            gap: 0.65rem;
            border: 1px solid rgba(37, 99, 235, 0.14);
            border-top-width: 5px;
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
        }

        .month-card:hover {
            transform: none;
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
        }

        .month-header {
            margin-bottom: 0;
            padding-bottom: 0.55rem;
            border-bottom: 1px solid var(--border-color);
        }

        .month-title {
            font-size: 1rem !important;
        }

        .summary {
            display: grid;
            gap: 0.35rem;
            margin-bottom: 0;
            padding: 0.55rem;
            background: #f8fafc;
            border: 1px solid var(--border-color);
            border-radius: 10px;
        }

        .summary-item {
            margin-bottom: 0;
            padding: 0;
            gap: 0.75rem;
        }

        .chart-container {
            margin: 0;
        }

        .details {
            display: grid;
            gap: 0.7rem;
            margin-top: 0;
            padding-top: 0;
            border-top: none;
        }

        .notes-section,
        .income-section,
        .expenditure-section {
            margin-bottom: 0;
            padding: 0.65rem;
            background: #ffffff;
            border: 1px solid var(--border-color);
            border-radius: 10px;
        }

        .notes-section h4,
        .income-section h4,
        .expenditure-section h4 {
            min-height: 28px;
            margin-bottom: 0.5rem;
            padding-bottom: 0.35rem;
            border-bottom: 1px solid var(--border-color);
            font-size: 0.86rem !important;
        }

        .month-card li.draggable-item {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: center;
            gap: 0.65rem;
            min-height: 34px;
            padding: 0.38rem 0.45rem;
            background: #f8fafc;
            border: 1px solid transparent;
            border-bottom: none;
            border-radius: 8px;
        }

        .month-card li.draggable-item:hover {
            background: #eef4ff;
            border-color: rgba(37, 99, 235, 0.18);
        }

        .month-card .item-name {
            min-width: 0;
            padding-right: 0;
            overflow-wrap: anywhere;
            line-height: 1.35;
        }

        .month-card .item-amount {
            justify-self: end;
            font-size: 0.84rem !important;
        }

        .final-balance {
            margin-top: 0;
            padding: 0.55rem 0.65rem;
            background: #eff6ff;
            border: 1px solid rgba(37, 99, 235, 0.16);
            border-radius: 10px;
            text-align: right;
            font-size: 0.92rem !important;
        }

        .total-summary-card {
            padding: 1.35rem;
        }

        .summary-grid {
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            align-items: stretch;
        }

        .summary-grid-item {
            display: flex;
            flex-direction: column;
            justify-content: center;
            min-height: 92px;
            padding: 0.85rem;
            background: #f8fafc;
            border: 1px solid var(--border-color);
            border-radius: 12px;
            box-sizing: border-box;
        }

        .summary-grid-item .label {
            margin-bottom: 0.45rem;
        }

        body.edit-mode .initial-balance-editor {
            display: block;
            width: 100%;
            min-width: 0;
            min-height: 48px;
            padding: 0.45rem 0.75rem;
            font-size: 1.45rem !important;
            line-height: 1.2;
            border-width: 2px;
            border-radius: 10px;
            box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
        }

        body.edit-mode .initial-balance-editor:focus {
            border-color: var(--primary-hover);
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
        }

        /* Edit mode card readability */
        body.edit-mode .months-grid {
            grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
            align-items: start;
        }

        body.edit-mode .month-card {
            padding: 0.95rem;
            border: 1px solid rgba(37, 99, 235, 0.14);
            border-top-width: 5px;
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
            gap: 0.65rem;
        }

        body.edit-mode .month-card:hover {
            transform: none;
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
        }

        body.edit-mode .month-header {
            margin-bottom: 0;
            padding-bottom: 0.55rem;
            border-bottom: 1px solid var(--border-color);
        }

        body.edit-mode .month-title {
            font-size: 1rem !important;
        }

        body.edit-mode .summary {
            display: grid;
            gap: 0.35rem;
            margin-bottom: 0;
            padding: 0.55rem;
            background: #f8fafc;
            border: 1px solid var(--border-color);
            border-radius: 10px;
        }

        body.edit-mode .summary-item {
            margin-bottom: 0;
            padding: 0;
            gap: 0.75rem;
        }

        body.edit-mode .chart-container {
            margin: 0;
        }

        body.edit-mode .details {
            display: grid;
            gap: 0.7rem;
            margin-top: 0;
            padding-top: 0;
            border-top: none;
        }

        body.edit-mode .notes-section,
        body.edit-mode .income-section,
        body.edit-mode .expenditure-section {
            margin-bottom: 0;
            padding: 0.65rem;
            background: #ffffff;
            border: 1px solid var(--border-color);
            border-radius: 10px;
        }

        body.edit-mode .notes-section h4,
        body.edit-mode .income-section h4,
        body.edit-mode .expenditure-section h4 {
            min-height: 28px;
            margin-bottom: 0.5rem;
            padding-bottom: 0.35rem;
            border-bottom: 1px solid var(--border-color);
            font-size: 0.86rem !important;
        }

        body.edit-mode .notes-editor {
            min-height: 72px;
            box-sizing: border-box;
            background: #f8fafc;
            border-radius: 8px;
        }

        body.edit-mode .item-drop-zone {
            display: grid;
            gap: 0.35rem;
            min-height: 48px;
        }

        body.edit-mode li.draggable-item {
            display: grid;
            grid-template-columns: 18px minmax(0, 1fr) auto 52px;
            align-items: center;
            gap: 0.5rem;
            min-height: 36px;
            padding: 0.38rem 0.45rem;
            background: #f8fafc;
            border: 1px solid transparent;
            border-bottom: none;
            border-radius: 8px;
        }

        body.edit-mode li.draggable-item:hover {
            background: #eef4ff;
            border-color: rgba(37, 99, 235, 0.18);
        }

        body.edit-mode .item-disabled-toggle {
            width: 16px;
            height: 16px;
            margin: 0;
        }

        body.edit-mode .item-name {
            min-width: 0;
            padding-right: 0;
            overflow-wrap: anywhere;
            line-height: 1.35;
        }

        body.edit-mode .item-amount {
            justify-self: end;
            font-size: 0.84rem !important;
        }

        body.edit-mode li.draggable-item .edit-controls {
            justify-content: flex-end;
            gap: 0.2rem;
        }

        body.edit-mode li.draggable-item .control-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            padding: 0;
            border-radius: 6px;
            background: #ffffff;
            border: 1px solid var(--border-color);
        }

        body.edit-mode li.draggable-item .control-btn svg {
            width: 16px;
            height: 16px;
        }

        body.edit-mode .income-section h4 .edit-controls,
        body.edit-mode .expenditure-section h4 .edit-controls {
            flex: 0 0 auto;
        }

        body.edit-mode .final-balance {
            margin-top: 0;
            padding: 0.55rem 0.65rem;
            background: #eff6ff;
            border: 1px solid rgba(37, 99, 235, 0.16);
            border-radius: 10px;
            text-align: right;
            font-size: 0.92rem !important;
        }

        @media (max-width: 768px) {
            .summary-grid {
                grid-template-columns: 1fr;
            }

            .summary-grid-item {
                min-height: 82px;
            }

            body.edit-mode .initial-balance-editor {
                font-size: 1.25rem !important;
            }

            .months-grid {
                grid-template-columns: 1fr;
            }

            body.edit-mode li.draggable-item {
                grid-template-columns: 18px minmax(0, 1fr) auto;
            }

            body.edit-mode li.draggable-item .edit-controls {
                grid-column: 2 / 4;
                justify-content: flex-start;
            }
        }

        /* Horizontal month scroll layout guard */
        @media (min-width: 769px) {
            body.pc-months-scroll .months-grid {
                grid-template-columns: none;
                grid-template-rows: 1fr;
                grid-auto-flow: column;
                grid-auto-columns: minmax(320px, 360px);
                align-items: stretch;
                gap: 0.9rem;
                overflow-x: auto;
                overflow-y: hidden;
                padding: 0.25rem 0.15rem 0.75rem;
                scroll-snap-type: x proximity;
            }

            body.pc-months-scroll .month-card {
                width: auto;
                min-width: 0;
                max-width: none;
                scroll-snap-align: start;
            }

            body.pc-months-scroll .item-drop-zone {
                display: grid;
                gap: 0.35rem;
                min-height: 48px;
            }

            body.pc-months-scroll .month-card li.draggable-item {
                display: grid;
                grid-template-columns: minmax(0, 1fr) max-content;
                align-items: center;
                column-gap: 0.55rem;
                row-gap: 0.25rem;
                width: 100%;
                min-width: 0;
                box-sizing: border-box;
            }

            body.pc-months-scroll.edit-mode .month-card li.draggable-item {
                grid-template-columns: 18px minmax(0, 1fr) max-content 52px;
                cursor: grab;
            }

            body.pc-months-scroll .month-card .item-name {
                min-width: 0;
                overflow-wrap: anywhere;
            }

            body.pc-months-scroll .month-card .item-amount {
                justify-self: end;
                white-space: nowrap;
            }
        }

        /* Mobile final layout guard */
        @media (max-width: 768px) {
            html,
            body {
                width: 100%;
                max-width: 100%;
                overflow-x: hidden;
            }

            header {
                position: sticky;
                top: 0;
                z-index: 900;
                padding: 0.6rem 0.75rem;
            }

            .header-bar {
                display: grid;
                grid-template-columns: 44px minmax(0, 1fr);
                align-items: center;
                gap: 0.55rem;
                width: 100%;
            }

            .sidebar-toggle-btn {
                width: 44px;
                height: 44px;
                padding: 0;
            }

            .header-title {
                min-width: 0;
                margin: 0;
                font-size: 1.05rem !important;
                line-height: 1.25;
                overflow-wrap: anywhere;
            }

            #user-name-container,
            #search-box,
            .header-edit-controls {
                grid-column: 1 / -1;
                width: 100%;
                max-width: none;
                min-width: 0;
                box-sizing: border-box;
            }

            #user-name-display {
                width: 100%;
                min-width: 0;
                text-align: left;
                overflow-wrap: anywhere;
            }

            #search-box {
                min-height: 42px;
                margin: 0;
                font-size: 0.95rem;
            }

            .header-edit-controls {
                display: grid;
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 0.4rem;
                overflow: visible;
            }

            .header-edit-btn {
                width: 100%;
                min-width: 0;
                min-height: 42px;
                padding: 0.45rem 0.35rem;
                font-size: 0.78rem !important;
                white-space: normal;
                line-height: 1.25;
            }

            .sidebar {
                width: min(82vw, 280px);
                max-width: 280px;
            }

            .sidebar-header {
                gap: 0.65rem;
                padding: 0.85rem;
            }

            .sidebar-kicker {
                font-size: 0.62rem;
            }

            .sidebar-title {
                font-size: 1rem;
            }

            .sidebar-close-btn {
                width: 32px;
                height: 32px;
                border-radius: 8px;
                font-size: 1.4rem;
            }

            .sidebar-nav {
                padding: 0.65rem;
            }

            .sidebar-group {
                padding: 0.55rem;
                border-radius: 11px;
            }

            .sidebar-group+.sidebar-group {
                margin-top: 0.6rem;
            }

            .sidebar-group-title {
                gap: 0.4rem;
                padding: 0 0.15rem 0.4rem;
                font-size: 0.68rem;
            }

            .sidebar-group-title svg {
                width: 14px;
                height: 14px;
            }

            .sidebar-btn {
                gap: 0.6rem;
                min-height: 42px;
                padding: 0.55rem 0.65rem;
                border-radius: 8px;
                font-size: 0.82rem;
            }

            .sidebar-btn+.sidebar-btn {
                margin-top: 0.32rem;
            }

            .sidebar-btn svg {
                width: 19px;
                height: 19px;
            }

            #app-container {
                width: 100%;
                max-width: 100%;
                margin: 0;
                padding: 0.75rem;
                box-sizing: border-box;
                overflow-x: hidden;
            }

            .total-summary-card,
            .year-section,
            .month-card {
                width: 100%;
                min-width: 0;
                max-width: 100%;
                box-sizing: border-box;
            }

            .total-summary-card {
                margin-bottom: 1rem;
                padding: 0.85rem;
                border: 1px solid rgba(37, 99, 235, 0.14);
                border-radius: 14px;
                box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
            }

            .total-summary-card h2 {
                margin: 0 0 0.7rem;
                padding-bottom: 0.55rem;
                border-bottom: 1px solid var(--border-color);
                font-size: 1rem !important;
                text-align: left;
                line-height: 1.25;
                color: var(--text-color);
            }

            .summary-grid {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 0.55rem;
                text-align: left;
            }

            .summary-grid-item {
                display: flex;
                flex-direction: column;
                justify-content: center;
                min-width: 0;
                min-height: 0;
                padding: 0.58rem 0.65rem;
                background: #f8fafc;
                border: 1px solid var(--border-color);
                border-radius: 10px;
                box-shadow: none;
            }

            .summary-grid-item:first-child,
            .summary-grid-item:last-child {
                grid-column: 1 / -1;
            }

            .summary-grid-item:last-child {
                min-height: 0;
                background: #eff6ff;
                border-color: rgba(37, 99, 235, 0.2);
            }

            .summary-grid-item .label {
                margin-bottom: 0.35rem;
                color: var(--subtle-text-color);
                font-size: 0.76rem !important;
                font-weight: 700;
                line-height: 1.25;
            }

            .summary-grid-item .value {
                min-width: 0;
                font-size: 1.05rem !important;
                line-height: 1.25;
                overflow-wrap: anywhere;
            }

            .summary-grid-item:first-child .value,
            .summary-grid-item:last-child .value {
                font-size: 1.22rem !important;
            }

            .summary-grid-item:last-child .label,
            .summary-grid-item:last-child .value {
                color: var(--primary-color);
            }

            .summary-grid-item .initial-balance-editor {
                width: 100%;
                min-width: 0;
                min-height: 44px;
                box-sizing: border-box;
                font-size: 1.05rem !important;
            }

            .year-section {
                margin-bottom: 1rem;
                padding: 0;
            }

            .year-header,
            .year-header-editor {
                width: 100%;
                min-width: 0;
                gap: 0.45rem;
                align-items: center;
            }

            .year-header {
                margin-bottom: 0.65rem;
            }

            .year-title,
            .year-title-editor {
                min-width: 0;
                width: 100%;
                font-size: 1.15rem !important;
                white-space: normal;
                overflow-wrap: anywhere;
            }

            .months-grid {
                display: grid;
                grid-template-columns: 1fr;
                grid-auto-flow: row;
                grid-auto-columns: auto;
                gap: 0.75rem;
                width: 100%;
                margin: 0;
                padding: 0;
                overflow: visible;
                scroll-snap-type: none;
            }

            body.pc-months-scroll .months-grid {
                grid-template-columns: none;
                grid-auto-flow: column;
                grid-auto-columns: minmax(280px, 88vw);
                gap: 0.75rem;
                margin: 0 -0.75rem;
                padding: 0 0.75rem 0.75rem;
                align-items: start;
                overflow-x: auto;
                overflow-y: hidden;
                scroll-snap-type: x mandatory;
                scrollbar-width: none;
                -webkit-overflow-scrolling: touch;
            }

            body.pc-months-scroll .months-grid::-webkit-scrollbar {
                display: none;
            }

            .month-card {
                width: 100%;
                min-width: 0;
                padding: 0.68rem;
                gap: 0.42rem;
                flex-shrink: 1;
                scroll-snap-align: none;
            }

            body.pc-months-scroll .month-card {
                width: auto;
                max-width: none;
                flex-shrink: 0;
                scroll-snap-align: start;
            }

            .month-header {
                min-width: 0;
                padding-bottom: 0.35rem;
            }

            .month-title {
                min-width: 0;
                font-size: 0.98rem !important;
                overflow-wrap: anywhere;
            }

            .summary {
                padding: 0.48rem;
                gap: 0.25rem;
            }

            .summary-item {
                display: grid;
                grid-template-columns: minmax(0, 1fr) max-content;
                gap: 0.5rem;
                align-items: baseline;
                font-size: 0.86rem !important;
                min-height: 0;
            }

            .summary-item .label,
            .summary-item .value {
                min-width: 0;
            }

            .chart-label {
                max-width: calc(100% - 0.5rem);
                font-size: 0.68rem !important;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .month-card .chart-container {
                height: auto;
                min-height: 0;
                margin: 0;
                padding: 0;
            }

            .month-card .chart {
                height: 14px;
            }

            .details {
                margin-top: 0;
                padding-top: 0;
                border-top: none;
                gap: 0.45rem;
            }

            .notes-section,
            .income-section,
            .expenditure-section {
                padding: 0.5rem;
            }

            .notes-section h4,
            .income-section h4,
            .expenditure-section h4 {
                min-height: 0;
                margin-top: 0;
                margin-bottom: 0.35rem;
                padding-bottom: 0.28rem;
            }

            .notes-section {
                margin-top: 0;
            }

            .notes-content,
            .notes-editor {
                width: 100%;
                min-width: 0;
                box-sizing: border-box;
            }

            .notes-content {
                min-height: 0;
                padding: 0.38rem 0.45rem;
            }

            .notes-editor {
                min-height: 56px;
            }

            .income-section h4,
            .expenditure-section h4 {
                gap: 0.45rem;
            }

            .item-drop-zone {
                display: grid;
                gap: 0.35rem;
                min-width: 0;
                min-height: 0;
            }

            .month-card li.draggable-item,
            body.edit-mode li.draggable-item {
                display: grid;
                grid-template-columns: minmax(0, 1fr) max-content;
                column-gap: 0.5rem;
                row-gap: 0.3rem;
                width: 100%;
                min-width: 0;
                min-height: 0;
                padding: 0.36rem 0.48rem;
                box-sizing: border-box;
            }

            body.edit-mode li.draggable-item {
                grid-template-columns: 18px minmax(0, 1fr) max-content;
            }

            .month-card .item-name,
            body.edit-mode .item-name {
                min-width: 0;
                overflow-wrap: anywhere;
                word-break: break-word;
                line-height: 1.35;
            }

            .month-card .item-amount,
            body.edit-mode .item-amount {
                justify-self: end;
                white-space: nowrap;
                font-size: 0.82rem !important;
            }

            body.edit-mode li.draggable-item .edit-controls {
                grid-column: 2 / 4;
                justify-content: flex-start;
                flex-wrap: wrap;
                gap: 0.3rem;
            }

            body.edit-mode li.draggable-item .control-btn {
                width: 34px;
                height: 34px;
                min-width: 34px;
                min-height: 34px;
            }

            .final-balance {
                margin-top: 0;
                padding: 0.5rem 0.55rem;
                font-size: 0.9rem !important;
                overflow-wrap: anywhere;
            }
        }

        @media (max-width: 420px) {
            .header-edit-controls {
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 0.28rem;
            }

            .header-edit-btn {
                min-height: 34px;
                padding: 0.28rem 0.16rem;
                border-radius: 8px;
                font-size: 0.66rem !important;
                line-height: 1.12;
                white-space: normal;
                overflow-wrap: anywhere;
            }

            .summary-item {
                grid-template-columns: 1fr;
                gap: 0.15rem;
            }

            .summary-item .value,
            .month-card .item-amount,
            body.edit-mode .item-amount {
                justify-self: start;
            }

            .month-card li.draggable-item,
            body.edit-mode li.draggable-item {
                grid-template-columns: 1fr;
            }

            body.edit-mode li.draggable-item {
                grid-template-columns: 18px minmax(0, 1fr);
            }

            body.edit-mode li.draggable-item .item-amount {
                grid-column: 2;
            }

            body.edit-mode li.draggable-item .edit-controls {
                grid-column: 2;
            }
        }

        /* Edit mode item layout polish */
        body.edit-mode .month-card li.draggable-item {
            border-color: rgba(37, 99, 235, 0.12);
            background: #f8fafc;
        }

        body.edit-mode .month-card .item-disabled-toggle {
            align-self: center;
            justify-self: center;
        }

        body.edit-mode .month-card li.draggable-item .edit-controls {
            display: flex;
            align-items: center;
        }

        body.edit-mode .month-card li.draggable-item .control-btn {
            color: var(--primary-color);
        }

        body.edit-mode .month-card li.draggable-item .delete-btn {
            color: var(--expenditure-color);
        }

        @media (max-width: 768px) {
            body.edit-mode .month-card li.draggable-item {
                grid-template-columns: 18px minmax(0, 1fr) auto;
                grid-template-areas:
                    "check name actions"
                    ". amount actions";
                align-items: center;
                column-gap: 0.5rem;
                row-gap: 0.18rem;
                padding: 0.45rem 0.5rem;
            }

            body.edit-mode .month-card li.draggable-item .item-disabled-toggle {
                grid-area: check;
                margin: 0;
            }

            body.edit-mode .month-card li.draggable-item .item-name {
                grid-area: name;
                padding-right: 0;
                font-weight: 600;
            }

            body.edit-mode .month-card li.draggable-item .item-amount {
                grid-area: amount;
                justify-self: start;
                color: var(--subtle-text-color);
                font-size: 0.8rem !important;
            }

            body.edit-mode .month-card li.draggable-item .edit-controls {
                grid-area: actions;
                justify-content: flex-end;
                align-self: center;
                flex-wrap: nowrap;
                gap: 0.28rem;
            }
        }

        @media (max-width: 420px) {
            body.edit-mode .month-card li.draggable-item {
                grid-template-columns: 18px minmax(0, 1fr);
                grid-template-areas:
                    "check name"
                    ". amount"
                    ". actions";
            }

            body.edit-mode .month-card li.draggable-item .edit-controls {
                justify-content: flex-start;
                margin-top: 0.15rem;
            }
        }

        /* Mobile modal readability */
        @media (max-width: 768px) {
            #summary-modal .modal-content.wide,
            #category-summary-modal .modal-content.wide,
            #settings-modal .modal-content,
            #data-analysis-modal .modal-content.wide {
                width: 100%;
                max-width: none;
                height: min(92vh, calc(100dvh - 1.5rem));
                max-height: calc(100dvh - 1.5rem);
                margin: 0;
                border-radius: 14px;
                display: grid;
                grid-template-rows: auto minmax(0, 1fr);
                overflow: hidden;
            }

            #data-analysis-modal .modal-content.wide {
                grid-template-rows: auto auto minmax(0, 1fr) auto;
            }

            #summary-modal .modal-header,
            #category-summary-modal .modal-header,
            #settings-modal .modal-header,
            #data-analysis-modal .modal-header {
                min-height: 52px;
                padding: 0.72rem 0.85rem;
            }

            #summary-modal .modal-header h2,
            #category-summary-modal .modal-header h2,
            #settings-modal .modal-header h2,
            #data-analysis-modal .modal-header h2 {
                font-size: 0.98rem !important;
                line-height: 1.2;
            }

            #summary-modal .close-btn,
            #category-summary-modal .close-btn,
            #settings-modal .close-btn,
            #data-analysis-modal .close-btn {
                width: 34px;
                height: 34px;
                border-radius: 9px;
                font-size: 1.35rem !important;
            }

            #summary-content,
            #category-summary-content,
            #settings-modal .settings-scroll {
                min-height: 0;
                max-height: none;
                padding: 0.85rem !important;
                overflow-y: auto;
                scrollbar-width: none;
                box-sizing: border-box;
            }

            #summary-content::-webkit-scrollbar,
            #category-summary-content::-webkit-scrollbar,
            #settings-modal .settings-scroll::-webkit-scrollbar {
                display: none;
            }

            .summary-year-section {
                margin-bottom: 1rem;
                padding: 0;
            }

            .summary-year-title {
                margin: 0 0 0.65rem;
                padding-bottom: 0.35rem;
                font-size: 1rem !important;
                border-bottom-width: 1px;
            }

            .summary-tables {
                display: grid;
                grid-template-columns: 1fr;
                gap: 0.8rem;
            }

            .summary-tables>div,
            #settings-modal .settings-section {
                min-width: 0;
                padding: 0.75rem;
                background: #ffffff;
                border: 1px solid var(--border-color);
                border-radius: 10px;
                box-shadow: none;
                box-sizing: border-box;
            }

            .summary-tables h4,
            #settings-modal .settings-section h3 {
                margin: 0 0 0.55rem;
                padding-bottom: 0.35rem;
                font-size: 0.88rem !important;
                line-height: 1.25;
                border-bottom: 1px solid var(--border-color);
            }

            .summary-table {
                min-width: 360px;
                font-size: 0.82rem !important;
            }

            .summary-tables>div {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: thin;
            }

            .summary-table th,
            .summary-table td {
                padding: 0.5rem 0.55rem;
                white-space: nowrap;
            }

            .summary-table td:first-child,
            .summary-table th:first-child {
                min-width: 150px;
                white-space: normal;
                overflow-wrap: anywhere;
            }

            #settings-modal .settings-section {
                margin: 0 0 0.75rem;
            }

            #settings-modal .settings-section+.settings-section {
                margin-top: 0;
                padding-top: 0.75rem;
            }

            #settings-modal .form-group {
                margin-bottom: 0.75rem;
            }

            #settings-modal textarea,
            #settings-modal input[type="password"] {
                width: 100%;
                min-width: 0;
                min-height: 42px;
                font-size: 0.88rem !important;
            }

            #settings-modal #category-input {
                min-height: 150px;
                resize: vertical;
            }

            #settings-modal .toggle-switch-group {
                display: grid;
                grid-template-columns: minmax(0, 1fr) auto;
                gap: 0.75rem;
                align-items: center;
                padding: 0.65rem 0;
            }

            #settings-modal .toggle-switch-group>label:first-child {
                min-width: 0;
                line-height: 1.35;
                overflow-wrap: anywhere;
            }

            #settings-modal .form-actions {
                margin: 0.8rem -0.75rem -0.75rem;
                padding: 0.75rem;
                display: grid;
                grid-template-columns: 1fr;
                gap: 0.45rem;
            }

            #settings-modal .form-actions button {
                width: 100%;
                min-height: 40px;
            }

            #data-analysis-modal .analysis-tabs {
                display: grid;
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 0.35rem;
                padding: 0.65rem 0.85rem;
            }

            #data-analysis-modal .analysis-tab {
                min-height: 34px;
                padding: 0.4rem 0.25rem;
                font-size: 0.76rem !important;
                border-radius: 8px;
            }

            #data-analysis-modal .analysis-content {
                padding: 0.75rem 0.85rem;
                overflow-y: auto;
                scrollbar-width: none;
            }

            #data-analysis-modal .analysis-content::-webkit-scrollbar {
                display: none;
            }

            #data-analysis-modal .analysis-content .chart-container {
                min-height: 260px;
                padding: 0.7rem;
                border: 1px solid var(--border-color);
                border-radius: 10px;
            }

            #data-analysis-modal .breakdown-charts {
                grid-template-columns: 1fr;
                gap: 0.75rem;
            }

            #data-analysis-modal .breakdown-chart-item {
                min-height: 240px;
                padding: 0.65rem;
                border: 1px solid var(--border-color);
                border-radius: 10px;
                background: #ffffff;
            }

            #data-analysis-modal .analysis-stats {
                padding: 0.75rem 0.85rem;
            }

            #data-analysis-modal .analysis-stats h4 {
                margin-bottom: 0.5rem;
                font-size: 0.86rem !important;
            }

            #data-analysis-modal .stats-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 0.45rem;
            }

            #data-analysis-modal .stat-card {
                padding: 0.55rem;
                border-radius: 9px;
            }
        }

        @media (max-width: 360px) {
            header {
                padding: 0.5rem;
            }

            .header-bar {
                grid-template-columns: 38px minmax(0, 1fr);
                gap: 0.42rem;
            }

            .sidebar-toggle-btn {
                width: 38px;
                height: 38px;
            }

            .header-title {
                font-size: 0.95rem !important;
            }

            #search-box {
                min-height: 36px;
                font-size: 0.84rem !important;
            }

            .header-edit-controls {
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 0.22rem;
            }

            .header-edit-btn {
                min-height: 30px;
                padding: 0.22rem 0.08rem;
                border-radius: 7px;
                font-size: 0.59rem !important;
                letter-spacing: 0;
            }

            #summary-modal .modal-content.wide,
            #category-summary-modal .modal-content.wide,
            #settings-modal .modal-content,
            #data-analysis-modal .modal-content.wide {
                height: calc(100dvh - 1rem);
                max-height: calc(100dvh - 1rem);
                border-radius: 12px;
            }

            #summary-content,
            #category-summary-content,
            #settings-modal .settings-scroll,
            #data-analysis-modal .analysis-content {
                padding-left: 0.65rem !important;
                padding-right: 0.65rem !important;
            }

            .summary-table {
                min-width: 320px;
                font-size: 0.76rem !important;
            }

            #data-analysis-modal .analysis-content .chart-container {
                min-height: 230px;
            }

            #data-analysis-modal .stat-label {
                font-size: 0.66rem !important;
            }

            #data-analysis-modal .stat-value {
                font-size: 0.78rem !important;
            }
        }

        .print-report {
            display: none;
        }

        /* 印刷用スタイル */
        @media print {
            @page {
                size: A4 landscape;
                margin: 8mm;
            }

            * {
                box-sizing: border-box;
            }

            body {
                background: #fff !important;
                color: #000 !important;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
                font-size: 10pt !important;
                line-height: 1.4;
                margin: 0;
                padding: 0;
            }

            header,
            .sidebar,
            .sidebar-overlay,
            #search-box,
            .modal-overlay,
            #popupMessage {
                display: none !important;
            }

            .edit-controls,
            .control-btn,
            .notes-editor,
            .initial-balance-editor,
            .add-year-btn,
            .edit-months-btn {
                display: none !important;
            }

            .chart-container {
                display: none !important;
            }

            #app-container {
                max-width: 100%;
                width: 100%;
                margin: 0;
                padding: 0;
            }

            #app-container>.total-summary-card,
            #app-container>.year-section {
                display: none !important;
            }

            .print-report {
                display: block !important;
                width: 100%;
                color: #000 !important;
            }

            .print-report-header {
                display: block;
                margin-bottom: 4mm;
                padding-bottom: 2mm;
                border-bottom: 2px solid #000;
                break-after: avoid;
            }

            .print-report-kicker {
                display: none !important;
            }

            .print-report h1 {
                margin: 0;
                color: #000 !important;
                font-size: 16pt !important;
                line-height: 1.2;
                text-align: center;
            }

            .print-report-date {
                display: none !important;
            }

            .print-summary-table,
            .print-month-table {
                width: 100%;
                border-collapse: collapse;
                border-spacing: 0;
                color: #000 !important;
            }

            .print-summary-table {
                margin-bottom: 4mm;
                table-layout: fixed;
                break-after: avoid;
            }

            .print-summary-table th,
            .print-summary-table td {
                padding: 2mm 2.5mm;
                border: 1px solid #000;
                text-align: right;
                color: #000 !important;
                background: transparent !important;
            }

            .print-summary-table th {
                font-size: 8pt !important;
                text-align: center;
            }

            .print-summary-table td {
                font-size: 11pt !important;
                font-weight: 700;
            }

            .print-year-section {
                margin-top: 4mm;
                break-inside: avoid-page;
                page-break-inside: avoid;
            }

            .print-year-section:not(:first-of-type) {
                break-before: page;
                page-break-before: always;
            }

            .print-year-section h2 {
                margin: 0 0 2mm;
                padding: 0 0 1mm;
                background: transparent !important;
                border-bottom: 1px solid #000;
                color: #000 !important;
                font-size: 12pt !important;
                line-height: 1.2;
                break-after: avoid;
            }

            .print-month-table {
                table-layout: fixed;
                font-size: 7.5pt !important;
            }

            .print-month-table thead {
                display: table-header-group;
            }

            .print-month-table tr {
                break-inside: avoid;
                page-break-inside: avoid;
            }

            .print-month-table th,
            .print-month-table td {
                padding: 1.3mm 1.5mm;
                border: 1px solid #000;
                vertical-align: top;
                overflow-wrap: anywhere;
                color: #000 !important;
                background: transparent !important;
            }

            .print-month-table thead th {
                font-size: 7.5pt !important;
                text-align: center;
            }

            .print-month-table tbody>tr:nth-child(even)>td,
            .print-month-table tbody>tr:nth-child(even)>th {
                background: transparent !important;
            }

            .print-month-table tbody>tr>th {
                color: #000 !important;
                font-size: 9pt !important;
                text-align: center;
                white-space: nowrap;
            }

            .print-month-table td:nth-child(2),
            .print-month-table td:nth-child(3),
            .print-month-table td:nth-child(4),
            .print-month-table td:nth-child(5) {
                text-align: right;
                white-space: nowrap;
                font-variant-numeric: tabular-nums;
            }

            .print-month-col {
                width: 9mm;
            }

            .print-items-col {
                width: 50mm;
            }

            .print-note-col {
                display: none !important;
            }

            .print-item-list {
                display: grid;
                gap: 0.6mm;
                color: #000 !important;
            }

            .print-item-line {
                display: grid;
                grid-template-columns: minmax(0, 1fr) max-content;
                gap: 2mm;
                font-size: 7.2pt !important;
                line-height: 1.25;
                color: #000 !important;
            }

            .print-item-line span:last-child {
                text-align: right;
                white-space: nowrap;
                font-variant-numeric: tabular-nums;
            }

            .print-income,
            .print-expenditure,
            .print-net {
                color: #000 !important;
            }

            .print-empty {
                color: #000 !important;
                font-size: 7pt !important;
            }

            body.print-portrait .print-report h1 {
                font-size: 13pt !important;
            }

            body.print-portrait .print-report-header {
                margin-bottom: 2.5mm;
                padding-bottom: 1.2mm;
            }

            body.print-portrait .print-summary-table {
                margin-bottom: 2.5mm;
            }

            body.print-portrait .print-summary-table th,
            body.print-portrait .print-summary-table td {
                padding: 1mm 1.2mm;
                font-size: 7.2pt !important;
            }

            body.print-portrait .print-summary-table td {
                font-size: 8.5pt !important;
            }

            body.print-portrait .print-year-section {
                margin-top: 2.5mm;
                break-inside: auto;
                page-break-inside: auto;
            }

            body.print-portrait .print-year-section:not(:first-of-type) {
                break-before: auto;
                page-break-before: auto;
            }

            body.print-portrait .print-year-section h2 {
                margin-bottom: 1.2mm;
                padding-bottom: 0.6mm;
                font-size: 10.5pt !important;
            }

            body.print-portrait .print-month-table,
            body.print-portrait .print-month-table thead,
            body.print-portrait .print-month-table tbody,
            body.print-portrait .print-month-table tr,
            body.print-portrait .print-month-table th,
            body.print-portrait .print-month-table td {
                display: block;
                width: 100%;
            }

            body.print-portrait .print-month-table thead {
                display: none;
            }

            body.print-portrait .print-month-table tr {
                display: grid;
                grid-template-columns: 12mm repeat(4, minmax(0, 1fr));
                grid-template-areas:
                    "month income expenditure diff balance"
                    "month incomeItems incomeItems expenditureItems expenditureItems";
                margin-bottom: 1.6mm;
                border: 1px solid #000;
                break-inside: auto;
                page-break-inside: auto;
            }

            body.print-portrait .print-month-table tbody>tr>th {
                grid-area: month;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 0.8mm 0.6mm;
                border: 0;
                border-right: 1px solid #000;
                font-size: 9.2pt !important;
                text-align: center;
                background: transparent !important;
                writing-mode: horizontal-tb;
            }

            body.print-portrait .print-month-table td {
                display: grid;
                grid-template-columns: 1fr;
                grid-template-rows: auto auto;
                gap: 0.15mm;
                padding: 0.7mm 1mm;
                border: 0;
                border-bottom: 1px solid #000;
                text-align: right;
                white-space: normal;
                font-size: 7.2pt !important;
                line-height: 1.15;
            }

            body.print-portrait .print-month-table td:nth-child(2) {
                grid-area: income;
                border-right: 1px solid #000;
            }

            body.print-portrait .print-month-table td:nth-child(3) {
                grid-area: expenditure;
                border-right: 1px solid #000;
            }

            body.print-portrait .print-month-table td:nth-child(4) {
                grid-area: diff;
                border-right: 1px solid #000;
            }

            body.print-portrait .print-month-table td:nth-child(5) {
                grid-area: balance;
            }

            body.print-portrait .print-month-table td::before {
                content: attr(data-label);
                color: #000;
                font-weight: 700;
                text-align: center;
                font-size: 6.6pt !important;
                line-height: 1;
            }

            body.print-portrait .print-month-table td:nth-child(6),
            body.print-portrait .print-month-table td:nth-child(7) {
                display: block;
                text-align: left;
                border-bottom: 0;
                padding: 0.9mm 1mm;
            }

            body.print-portrait .print-month-table td:nth-child(6) {
                grid-area: incomeItems;
                border-right: 1px solid #000;
            }

            body.print-portrait .print-month-table td:nth-child(7) {
                grid-area: expenditureItems;
            }

            body.print-portrait .print-month-table td:nth-child(6)::before,
            body.print-portrait .print-month-table td:nth-child(7)::before {
                display: block;
                margin-bottom: 0.45mm;
                text-align: left;
                font-size: 6.9pt !important;
            }

            body.print-portrait .print-month-table tr td:last-child {
                border-bottom: 0;
            }

            body.print-portrait .print-item-line {
                grid-template-columns: minmax(0, 1fr) max-content;
                gap: 1.2mm;
                font-size: 6.8pt !important;
                line-height: 1.12;
            }

            body.print-portrait .print-item-list {
                display: grid;
                grid-template-columns: minmax(0, 1fr);
                column-gap: 1.4mm;
                row-gap: 0.3mm;
            }

            .total-summary-card,
            .year-section,
            .month-card {
                box-shadow: none !important;
                background: #fff !important;
            }

            /* 総合収支カード */
            .total-summary-card {
                border: 2px solid #2563eb;
                border-radius: 4mm;
                padding: 5mm;
                margin-bottom: 8mm;
            }

            .total-summary-card h2 {
                font-size: 16pt !important;
                margin-bottom: 4mm;
                text-align: center;
                color: #2563eb !important;
            }

            .summary-grid {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                gap: 3mm;
            }

            .summary-grid-item {
                text-align: center;
                padding: 2mm;
                border: 1px solid #e5e7eb;
                border-radius: 2mm;
            }

            .summary-grid-item .value {
                font-size: 14pt !important;
                font-weight: 700;
            }

            .summary-grid-item .label {
                font-size: 9pt !important;
                color: #6b7280 !important;
            }

            /* 年セクション */
            .year-section {
                margin-bottom: 8mm;
                break-inside: avoid;
            }

            .year-header {
                border-bottom: 2px solid #2563eb;
                padding-bottom: 2mm;
                margin-bottom: 5mm;
            }

            .year-title,
            .year-title-editor {
                font-size: 18pt !important;
                color: #1f2937 !important;
                font-weight: 700;
            }

            /* 月グリッド */
            .months-grid {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 4mm;
            }

            /* 月カード */
            .month-card {
                break-inside: avoid;
                page-break-inside: avoid;
                border: 1px solid #d1d5db;
                border-top: 4px solid #2563eb;
                border-radius: 3mm;
                padding: 4mm;
                margin-bottom: 0;
            }

            .month-card.positive-flow {
                border-top-color: #10b981 !important;
            }

            .month-card.negative-flow {
                border-top-color: #ef4444 !important;
            }

            .month-header {
                margin-bottom: 3mm;
            }

            .month-title {
                font-size: 13pt !important;
                color: #2563eb !important;
                font-weight: 700;
                margin: 0;
            }

            /* サマリー項目 */
            .summary {
                margin-bottom: 3mm;
            }

            .summary-item {
                display: flex;
                justify-content: space-between;
                font-size: 9pt !important;
                margin-bottom: 1mm;
                padding: 1mm 0;
            }

            .summary-item .label {
                font-weight: 500;
                color: #374151 !important;
            }

            .summary-item .value {
                font-weight: 700;
            }

            .summary-item .value.income {
                color: #059669 !important;
            }

            .summary-item .value.expenditure {
                color: #dc2626 !important;
            }

            /* 詳細セクション */
            .details {
                margin-top: 3mm;
                padding-top: 3mm;
                border-top: 1px solid #e5e7eb;
            }

            .income-section,
            .expenditure-section {
                margin-bottom: 3mm;
            }

            .income-section h4,
            .expenditure-section h4,
            .notes-section h4 {
                font-size: 10pt !important;
                margin-bottom: 2mm;
                color: #374151 !important;
                font-weight: 600;
                display: block;
            }

            .notes-section {
                margin-bottom: 3mm;
            }

            .notes-content {
                padding: 2mm;
                background: #f9fafb !important;
                font-size: 8pt !important;
                max-height: 30mm;
                overflow: hidden;
                border-radius: 2mm;
                border: 1px solid #e5e7eb;
            }

            /* リスト項目 */
            ul {
                margin: 0;
                padding: 0;
            }

            li {
                display: flex;
                justify-content: space-between;
                padding: 1.5mm 0;
                font-size: 8pt !important;
                border-bottom: 1px dotted #e5e7eb;
            }

            li:last-child {
                border-bottom: none;
            }

            li span:first-child {
                flex: 1;
                padding-right: 2mm;
            }

            li span:last-child {
                font-weight: 600;
                white-space: nowrap;
            }

            .income-section li span:last-child {
                color: #059669 !important;
            }

            /* 支出 */
            .expenditure-section li span:last-child {
                color: #dc2626 !important;
            }

            /* 最終残高 */
            .final-balance {
                font-size: 11pt !important;
                font-weight: 700;
                margin-top: 3mm;
                padding-top: 3mm;
                border-top: 1px solid #d1d5db;
                text-align: right;
                color: #2563eb !important;
            }

            /* プレースホルダー */
            .empty-list-placeholder {
                padding: 2mm;
                background: #f3f4f6 !important;
                color: #6b7280 !important;
                font-size: 8pt !important;
                text-align: center;
                border-radius: 2mm;
            }

            /* 改ページ制御 - 年セクションごとに */
            .year-section:not(:first-of-type) {
                page-break-before: always;
            }
        }

        /* Final popup containment and background-scroll guard */
        body.popup-open {
            position: fixed;
            left: 0;
            width: 100%;
            overflow: hidden;
            overscroll-behavior: none;
        }

        .modal-overlay,
        .popup-message,
        .password-overlay,
        .account-auth-overlay {
            width: 100%;
            max-width: 100vw;
            height: 100%;
            max-height: 100dvh;
            overflow: hidden;
            overscroll-behavior: contain;
        }

        .modal-content,
        .popup-content,
        .password-card,
        .account-auth-card {
            min-width: 0;
            max-width: min(100%, 980px);
            max-height: calc(100dvh - 2.5rem);
            overflow-x: hidden;
            overflow-y: auto;
            overscroll-behavior: contain;
            box-sizing: border-box;
        }

        .modal-content *,
        .popup-content *,
        .password-card *,
        .account-auth-card * {
            min-width: 0;
            max-width: 100%;
            box-sizing: border-box;
            overflow-wrap: anywhere;
        }

        .modal-header {
            flex-wrap: wrap;
            position: sticky;
            top: 0;
            z-index: 20;
            background: #f8fafc;
        }

        .modal-header h2 {
            flex: 1 1 180px;
        }

        .modal-header .close-btn {
            margin-left: auto;
            position: sticky;
            top: 0.75rem;
            z-index: 21;
        }

        .app-dialog-header,
        .password-card-header,
        .account-auth-header {
            position: sticky;
            top: 0;
            z-index: 20;
            background: #ffffff;
        }

        .app-dialog-header {
            margin: -1.25rem -1.25rem 0.85rem;
            padding: 1.25rem 1.25rem 0.85rem;
            border-bottom: 1px solid var(--border-color);
        }

        .password-card-header {
            margin: -1.75rem -1.75rem 1.35rem;
            padding: 1.75rem 1.75rem 1rem;
            border-bottom: 1px solid var(--border-color);
        }

        .account-auth-header {
            margin: -1.5rem -1.5rem 1rem;
            padding: 1.5rem 1.5rem 0.85rem;
            border-bottom: 1px solid var(--border-color);
        }

        .form-actions,
        .app-dialog-actions,
        .password-actions {
            flex-wrap: wrap;
        }

        .form-actions button,
        .app-dialog-actions button,
        .password-actions button,
        .account-auth-form button,
        .account-guest-area button {
            max-width: 100%;
            white-space: normal;
            overflow-wrap: anywhere;
        }

        .modal-content table,
        .popup-content table {
            max-width: 100%;
        }

        @media (max-width: 600px) {
            .modal-overlay,
            .popup-message,
            .password-overlay,
            .account-auth-overlay {
                padding: 0.5rem;
                align-items: center;
            }

            .modal-content,
            .popup-content,
            .password-card,
            .account-auth-card,
            .modal-content.wide {
                width: 100%;
                max-width: 100%;
                max-height: calc(100dvh - 1rem);
                margin: 0;
            }

            .modal-header {
                gap: 0.5rem;
            }

            .modal-header h2 {
                flex-basis: calc(100% - 46px);
                font-size: 1rem !important;
            }

            .modal-header .delete-year-btn {
                order: 3;
                width: 100%;
                margin: 0;
                white-space: normal;
            }

            .modal-content>form,
            .modal-content>.bulk-edit-columns,
            .modal-content>#summary-content,
            .modal-content>#category-summary-content,
            .modal-content>.settings-section,
            .modal-content>.settings-scroll,
            .modal-content>.analysis-content,
            .popup-content,
            .password-card,
            .account-auth-card {
                overflow-x: auto;
                overscroll-behavior-x: contain;
                scrollbar-width: thin;
                -webkit-overflow-scrolling: touch;
            }

            .modal-content>form::-webkit-scrollbar,
            .modal-content>.bulk-edit-columns::-webkit-scrollbar,
            .modal-content>#summary-content::-webkit-scrollbar,
            .modal-content>#category-summary-content::-webkit-scrollbar,
            .modal-content>.settings-section::-webkit-scrollbar,
            .modal-content>.settings-scroll::-webkit-scrollbar,
            .modal-content>.analysis-content::-webkit-scrollbar,
            .popup-content::-webkit-scrollbar,
            .password-card::-webkit-scrollbar,
            .account-auth-card::-webkit-scrollbar {
                display: initial;
                height: 8px;
            }

            #summary-content .summary-table,
            #category-summary-content table,
            .modal-content .data-table,
            .modal-content table {
                width: max-content;
                min-width: 100%;
                max-width: none;
            }

            #bulk-add-modal .bulk-edit-columns,
            #bulk-edit-modal .bulk-edit-columns {
                grid-template-columns: minmax(280px, 1fr) minmax(300px, 1fr);
                min-width: 600px;
                max-width: none;
                overflow-x: auto;
                overflow-y: auto;
            }

            .app-dialog-header {
                margin: -1.25rem -1.25rem 0.85rem;
            }

            .password-card-header {
                margin: -1.35rem -1.35rem 1.1rem;
                padding: 1.35rem 1.35rem 0.85rem;
            }

            .account-auth-header {
                margin: -1.5rem -1.5rem 1rem;
            }

            .form-actions,
            .app-dialog-actions,
            .password-actions {
                display: grid;
                grid-template-columns: minmax(0, 1fr);
                width: auto;
            }

            .form-actions button,
            .app-dialog-actions button,
            .password-actions button {
                width: 100%;
                min-width: 0;
            }
        }

        /* Final login dialog and navigation alignment */
        .account-auth-overlay {
            justify-content: center;
            align-items: center;
        }

        .account-auth-card {
            width: min(430px, calc(100vw - 2rem));
            margin: auto;
            padding: 1.5rem;
            overflow-x: hidden;
        }

        .account-auth-header {
            position: static;
            width: auto;
            max-width: none;
            margin: 0 0 1rem;
            padding: 0 0 0.85rem;
            border-bottom: 1px solid var(--border-color);
        }

        .account-auth-tabs,
        .account-auth-form,
        .account-guest-area,
        .account-auth-error,
        .account-auth-security {
            width: 100%;
            max-width: none;
        }

        .sidebar-header {
            position: sticky;
            top: 0;
            z-index: 3;
            align-items: center;
        }

        .sidebar-header>div {
            display: grid;
            gap: 0.1rem;
            min-width: 0;
        }

        .sidebar-kicker,
        .sidebar-title {
            line-height: 1.2;
        }

        .sidebar-nav {
            display: grid;
            align-content: start;
            gap: 0.85rem;
        }

        .sidebar-group+.sidebar-group {
            margin-top: 0;
        }

        .sidebar-group-title {
            min-height: 28px;
        }

        .sidebar-btn {
            display: grid;
            grid-template-columns: 22px minmax(0, 1fr);
            align-items: center;
            gap: 0.75rem;
            min-height: 46px;
            line-height: 1.3;
        }

        .sidebar-btn svg {
            justify-self: center;
        }

        @media (max-width: 768px) {
            .account-auth-card {
                width: min(430px, calc(100vw - 1rem));
                max-height: calc(100dvh - 1rem);
                padding: 1.25rem;
            }

            .account-auth-header {
                margin: 0 0 0.85rem;
                padding: 0 0 0.75rem;
            }

            .sidebar-header {
                padding: 0.9rem;
            }

            .sidebar-nav {
                gap: 0.65rem;
                padding: 0.65rem;
            }

            .sidebar-group {
                padding: 0.6rem;
            }

            .sidebar-btn {
                grid-template-columns: 20px minmax(0, 1fr);
                gap: 0.65rem;
                min-height: 42px;
                padding: 0.6rem 0.7rem;
                color: var(--text-color);
            }

            .sidebar-btn+.sidebar-btn {
                margin-top: 0.35rem;
                color: var(--text-color);
            }

            .sidebar-btn-danger,
            .sidebar-btn-danger+.sidebar-btn-danger {
                color: #dc2626;
            }
        }

        /* Administrator settings */
        .admin-only-control[hidden] {
            display: none !important;
        }

        #admin-settings-modal .admin-settings-content {
            display: grid;
            grid-template-rows: auto minmax(0, 1fr);
            width: min(1080px, calc(100vw - 2.5rem));
            max-width: 1080px;
            height: min(820px, calc(100dvh - 2.5rem));
            max-height: min(820px, calc(100dvh - 2.5rem));
            padding: 0;
            overflow: hidden;
        }

        .admin-settings-scroll {
            min-height: 0;
            padding: 1.15rem;
            overflow-y: auto;
            scrollbar-width: none;
        }

        .admin-settings-scroll::-webkit-scrollbar {
            display: none;
        }

        .admin-overview-section,
        .admin-user-toolbar,
        .admin-user-heading,
        .admin-user-actions,
        .admin-password-reset {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .admin-overview-section {
            justify-content: space-between;
            margin-bottom: 1rem;
        }

        #admin-refresh-button {
            min-height: 42px;
            margin: 0;
            padding: 0.65rem 1rem;
            color: var(--primary-color);
            background: #ffffff;
            border: 1px solid rgba(37, 99, 235, 0.28);
            border-radius: 10px;
            font-weight: 700;
        }

        #admin-refresh-button:hover {
            background: #eff6ff;
        }

        .admin-overview-section h3,
        .admin-kicker,
        .admin-user-id,
        .admin-protected-note {
            margin: 0;
        }

        .admin-kicker {
            color: var(--primary-color);
            font-size: 0.72rem !important;
            font-weight: 800;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }

        .admin-stats-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 0.75rem;
            margin-bottom: 1rem;
        }

        .admin-stat-card {
            display: grid;
            gap: 0.35rem;
            padding: 0.9rem 1rem;
            background: linear-gradient(145deg, #ffffff, #f8fafc);
            border: 1px solid var(--border-color);
            border-radius: 12px;
        }

        .admin-stat-card span {
            color: var(--subtle-text-color);
            font-size: 0.78rem !important;
        }

        .admin-stat-card strong {
            color: var(--primary-color);
            font-size: 1.4rem;
        }

        .admin-user-toolbar {
            display: grid;
            grid-template-columns: auto minmax(220px, 1fr);
            margin-bottom: 0.5rem;
            padding: 0.85rem 1rem;
            background: #f8fafc;
            border: 1px solid var(--border-color);
            border-radius: 12px;
        }

        .admin-user-toolbar label {
            margin: 0;
            font-weight: 700;
        }

        .admin-user-toolbar input,
        .admin-user-toolbar .search-only-field {
            width: 100%;
            min-height: 42px;
            padding: 0.65rem 0.8rem;
            background: #ffffff;
            border: 1px solid var(--border-color);
            border-radius: 9px;
        }

        .admin-settings-message {
            min-height: 1.5rem;
            margin: 0.45rem 0;
            color: var(--income-color);
            font-size: 0.85rem !important;
        }

        .admin-settings-message.is-danger {
            color: var(--expenditure-color);
        }

        .admin-users-list {
            display: grid;
            gap: 0.75rem;
        }

        .admin-user-card {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 1rem;
            padding: 1rem;
            background: #ffffff;
            border: 1px solid var(--border-color);
            border-radius: 14px;
        }

        .admin-user-card.is-disabled {
            background: #f8fafc;
            opacity: 0.82;
        }

        .admin-user-main {
            display: grid;
            gap: 0.8rem;
            min-width: 0;
        }

        .admin-user-heading {
            flex-wrap: wrap;
        }

        .admin-user-heading strong {
            font-size: 1rem;
        }

        .admin-role-badge,
        .admin-status-badge {
            padding: 0.22rem 0.5rem;
            border-radius: 999px;
            font-size: 0.68rem !important;
            font-weight: 800;
        }

        .admin-role-badge {
            color: #475569;
            background: #e2e8f0;
        }

        .admin-role-badge.is-admin {
            color: #7c3aed;
            background: #ede9fe;
        }

        .admin-status-badge.is-active {
            color: #047857;
            background: #d1fae5;
        }

        .admin-status-badge.is-disabled {
            color: #b91c1c;
            background: #fee2e2;
        }

        .admin-user-id,
        .admin-user-uuid,
        .admin-protected-note {
            color: var(--subtle-text-color);
            font-size: 0.78rem !important;
            overflow-wrap: anywhere;
        }

        .admin-user-identifiers {
            display: flex;
            flex-wrap: wrap;
            gap: 0.4rem 0.65rem;
            margin-top: 0.35rem;
        }

        .admin-user-id,
        .admin-user-uuid {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            max-width: 100%;
            margin: 0;
            padding: 0.35rem 0.55rem;
            background: #f8fafc;
            border: 1px solid var(--border-color);
            border-radius: 8px;
        }

        .admin-user-identifiers span {
            color: var(--primary-color);
            font-size: 0.62rem !important;
            font-weight: 800;
            letter-spacing: 0.06em;
        }

        .admin-user-identifiers strong {
            color: var(--text-color);
            font-size: 0.72rem;
            font-weight: 600;
            overflow-wrap: anywhere;
        }

        .admin-user-meta {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.5rem;
            margin: 0;
        }

        .admin-user-meta div {
            padding: 0.55rem;
            background: #f8fafc;
            border-radius: 9px;
        }

        .admin-user-meta dt {
            color: var(--subtle-text-color);
            font-size: 0.68rem !important;
        }

        .admin-user-meta dd {
            margin: 0.18rem 0 0;
            font-size: 0.76rem !important;
            overflow-wrap: anywhere;
        }

        .admin-user-actions {
            display: grid;
            grid-template-columns: minmax(140px, auto) minmax(290px, 1fr) minmax(140px, auto);
            align-items: stretch;
            gap: 0.65rem;
            width: min(100%, 670px);
            max-width: 670px;
        }

        .admin-action-group {
            display: grid;
            align-content: start;
            gap: 0.45rem;
            min-width: 0;
            padding: 0.65rem;
            background: #f8fafc;
            border: 1px solid var(--border-color);
            border-radius: 10px;
        }

        .admin-action-label {
            margin: 0;
            color: var(--subtle-text-color);
            font-size: 0.68rem !important;
            font-weight: 700;
            line-height: 1.3;
        }

        .admin-password-reset {
            display: grid;
            grid-template-columns: minmax(170px, 1fr) auto;
            gap: 0.45rem;
            min-width: 0;
        }

        .admin-password-reset input {
            min-height: 42px;
            width: 100%;
            padding: 0.6rem 0.7rem;
            color: var(--text-color);
            background: #ffffff;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            font-size: 0.78rem !important;
        }

        .admin-password-reset input:focus {
            border-color: var(--primary-color);
            outline: 3px solid rgba(37, 99, 235, 0.12);
        }

        .admin-action-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            min-height: 42px;
            margin: 0;
            padding: 0.6rem 0.75rem;
            border: 1px solid transparent;
            border-radius: 8px;
            cursor: pointer;
            font-size: 0.78rem !important;
            font-weight: 800;
            line-height: 1.3;
            white-space: nowrap;
            transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
        }

        .admin-action-button:hover {
            transform: translateY(-1px);
        }

        .admin-toggle-button.is-disable {
            color: #b45309;
            background: #fffbeb;
            border-color: #fcd34d;
        }

        .admin-toggle-button.is-enable {
            color: #047857;
            background: #ecfdf5;
            border-color: #6ee7b7;
        }

        .admin-reset-button {
            color: #ffffff;
            background: var(--primary-color);
            border-color: var(--primary-color);
        }

        .admin-reset-button:hover {
            background: var(--primary-hover);
        }

        .admin-delete-action {
            background: #fff7f7;
            border-color: rgba(239, 68, 68, 0.2);
        }

        .admin-delete-button {
            color: #b91c1c;
            background: #ffffff;
            border-color: rgba(239, 68, 68, 0.35);
        }

        .admin-delete-button:hover {
            background: #fee2e2;
        }

        .admin-empty-state {
            margin: 0;
            padding: 2rem;
            text-align: center;
            color: var(--subtle-text-color);
            background: #f8fafc;
            border: 1px dashed var(--border-color);
            border-radius: 12px;
        }

        @media (min-width: 769px) {
            .admin-user-card {
                grid-template-columns: minmax(0, 1fr);
            }

            .admin-user-main {
                grid-template-columns: minmax(0, 1fr) minmax(320px, 0.8fr);
                align-items: start;
            }

            .admin-user-heading,
            .admin-user-identifiers {
                grid-column: 1;
            }

            .admin-user-meta {
                grid-column: 2;
                grid-row: 1 / span 2;
            }

            .admin-user-actions {
                grid-template-columns: minmax(150px, 0.8fr) minmax(330px, 1.7fr) minmax(150px, 0.8fr);
                width: 100%;
                max-width: none;
            }

            .admin-protected-note {
                justify-self: start;
            }
        }

        @media (min-width: 769px) and (max-width: 1100px) {
            .admin-user-actions {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .admin-password-action {
                grid-column: 1 / -1;
                grid-row: 1;
            }
        }

        @media (max-width: 768px) {
            #admin-settings-modal {
                padding: 0.5rem;
            }

            #admin-settings-modal .admin-settings-content {
                width: 100%;
                max-width: 100%;
                height: calc(100dvh - 1rem);
                max-height: calc(100dvh - 1rem);
            }

            .admin-settings-scroll {
                padding: 0.75rem;
            }

            .admin-overview-section {
                display: grid;
                grid-template-columns: minmax(0, 1fr);
            }

            .admin-overview-section button {
                width: 100%;
            }

            .admin-stats-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 0.5rem;
            }

            .admin-user-toolbar,
            .admin-user-card {
                grid-template-columns: minmax(0, 1fr);
            }

            .admin-user-meta {
                grid-template-columns: minmax(0, 1fr);
            }

            .admin-user-actions {
                display: grid;
                grid-template-columns: minmax(0, 1fr);
                width: 100%;
                max-width: none;
            }

            .admin-password-reset {
                grid-template-columns: minmax(0, 1fr);
                min-width: 0;
            }

            .admin-action-group,
            .admin-user-actions button,
            .admin-password-reset input {
                width: 100%;
            }

            .admin-user-identifiers {
                display: grid;
                grid-template-columns: minmax(0, 1fr);
            }

            .admin-user-id,
            .admin-user-uuid {
                display: grid;
                grid-template-columns: auto minmax(0, 1fr);
            }
        }

        /* Hide popup scrollbars while preserving touch, wheel, and horizontal scrolling */
        .modal-content,
        .popup-content,
        .password-card,
        .account-auth-card,
        .modal-content>form,
        .modal-content>.bulk-edit-columns,
        .modal-content>#summary-content,
        .modal-content>#category-summary-content,
        .modal-content>.settings-section,
        .modal-content>.settings-scroll,
        .modal-content>.analysis-content {
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

        .modal-content::-webkit-scrollbar,
        .popup-content::-webkit-scrollbar,
        .password-card::-webkit-scrollbar,
        .account-auth-card::-webkit-scrollbar,
        .modal-content>form::-webkit-scrollbar,
        .modal-content>.bulk-edit-columns::-webkit-scrollbar,
        .modal-content>#summary-content::-webkit-scrollbar,
        .modal-content>#category-summary-content::-webkit-scrollbar,
        .modal-content>.settings-section::-webkit-scrollbar,
        .modal-content>.settings-scroll::-webkit-scrollbar,
        .modal-content>.analysis-content::-webkit-scrollbar {
            width: 0;
            height: 0;
            display: none;
        }

        /* Final data analysis layout polish */
        #data-analysis-modal .modal-content.wide {
            width: min(1180px, calc(100vw - 3rem));
            max-width: 1180px;
        }

        #data-analysis-modal .analysis-tab {
            min-height: 44px;
        }

        #data-analysis-modal .analysis-content .chart-container,
        #data-analysis-modal .analysis-stats,
        #data-analysis-modal .stat-card {
            border-color: rgba(148, 163, 184, 0.22);
        }

        #data-analysis-modal .stat-card {
            display: grid;
            align-content: center;
            gap: 0.3rem;
        }

        @media (min-width: 769px) {
            #data-analysis-modal .modal-content.wide {
                grid-template-columns: minmax(0, 1fr);
                grid-template-rows: auto auto minmax(0, 1fr) auto;
                height: min(820px, calc(100dvh - 2.5rem));
                max-height: min(820px, calc(100dvh - 2.5rem));
            }

            #data-analysis-modal .analysis-content {
                grid-column: 1;
                grid-row: 3;
                padding: 0.9rem 1.1rem;
            }

            #data-analysis-modal .analysis-stats {
                grid-column: 1;
                grid-row: 4;
                min-width: 0;
                padding: 0.8rem 1.1rem 0.9rem;
                overflow: visible;
                border-top: 1px solid var(--border-color);
                border-left: 0;
            }

            #data-analysis-modal .analysis-stats h4 {
                margin-bottom: 0.6rem;
            }

            #data-analysis-modal .stats-grid {
                grid-template-columns: repeat(4, minmax(0, 1fr));
                gap: 0.65rem;
            }

            #data-analysis-modal .stat-card {
                min-height: 72px;
                padding: 0.65rem;
            }
        }

        @media (max-width: 768px) {
            #data-analysis-modal .modal-content.wide {
                width: calc(100vw - 1rem);
                max-width: calc(100vw - 1rem);
                height: calc(100dvh - 1rem);
                max-height: calc(100dvh - 1rem);
                display: flex;
                flex-direction: column;
                padding: 0;
                overflow-x: hidden;
                overflow-y: auto;
                overscroll-behavior: contain;
                scrollbar-width: none;
            }

            #data-analysis-modal .modal-content.wide::-webkit-scrollbar {
                display: none;
            }

            #data-analysis-modal .modal-header {
                position: sticky;
                top: 0;
                z-index: 5;
                flex: 0 0 auto;
                width: 100%;
                min-height: 52px;
                height: 52px;
                padding: 0.55rem 0.75rem;
            }

            #data-analysis-modal .analysis-tabs {
                position: sticky;
                top: 52px;
                z-index: 4;
                flex: 0 0 auto;
                width: 100%;
                gap: 0.35rem;
                padding: 0.65rem 0.75rem;
                box-shadow: 0 1px 0 var(--border-color);
            }

            #data-analysis-modal .analysis-tab {
                min-height: 42px;
                padding: 0.55rem 0.35rem;
            }

            #data-analysis-modal .analysis-content {
                flex: 0 0 auto;
                min-height: 0;
                padding: 0.65rem 0.75rem;
                overflow: visible;
            }

            #data-analysis-modal .analysis-content .chart-container:not(#breakdown-chart-container) {
                width: 100%;
                min-width: 0;
                height: 340px;
                min-height: 340px;
                max-width: 100%;
                overflow: hidden;
            }

            #data-analysis-modal #breakdown-chart-container {
                width: 100%;
                height: auto;
                min-height: 0;
                overflow: visible;
            }

            #data-analysis-modal .breakdown-charts {
                height: auto;
                overflow: visible;
            }

            #data-analysis-modal .breakdown-chart-item {
                height: 320px;
                min-height: 320px;
                overflow: hidden;
            }

            #data-analysis-modal .analysis-stats {
                flex: 0 0 auto;
                padding: 0.75rem;
            }

            #data-analysis-modal .analysis-stats h4 {
                margin-bottom: 0.65rem;
            }

            #data-analysis-modal .stats-grid {
                gap: 0.5rem;
            }

            #data-analysis-modal .stat-card {
                min-height: 76px;
                padding: 0.55rem;
            }
        }

        /* Final warning and confirmation dialog alignment */
        .popup-message {
            padding: 1rem;
        }

        .popup-message .app-dialog-content {
            display: flex;
            flex-direction: column;
            width: min(440px, 100%);
            max-width: 440px;
            max-height: calc(100dvh - 2rem);
            margin: 0;
            padding: 0;
            overflow-x: hidden;
            overflow-y: auto;
            text-align: left;
            border-radius: 16px;
            scrollbar-width: none;
        }

        .popup-message .app-dialog-content::-webkit-scrollbar {
            display: none;
        }

        .popup-message .app-dialog-header {
            position: sticky;
            top: 0;
            z-index: 2;
            display: grid;
            grid-template-columns: 36px minmax(0, 1fr);
            align-items: center;
            gap: 0.75rem;
            width: 100%;
            min-height: 64px;
            margin: 0;
            padding: 0.85rem 1.25rem;
            background: #ffffff;
            border-bottom: 1px solid var(--border-color);
        }

        .popup-message .app-dialog-icon {
            width: 36px;
            height: 36px;
            margin: 0;
            flex: none;
            font-size: 1rem;
            line-height: 1;
        }

        .popup-message .app-dialog-content h2 {
            width: 100%;
            margin: 0;
            font-size: 1.05rem !important;
            line-height: 1.35;
            text-align: left;
            overflow-wrap: anywhere;
        }

        .popup-message #popupText {
            width: 100%;
            margin: 0;
            padding: 1.25rem 1.25rem 0;
            font-size: 0.95rem;
            line-height: 1.75;
            text-align: left;
            white-space: pre-line;
            overflow-wrap: anywhere;
        }

        .popup-message .app-dialog-actions {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.65rem;
            width: auto;
            margin: 1.25rem;
            padding: 1rem 0 0;
            border-top: 1px solid var(--border-color);
        }

        .popup-message .app-dialog-actions button {
            width: 100%;
            min-width: 0;
            min-height: 44px;
            margin: 0;
            padding: 0.65rem 0.8rem;
            line-height: 1.35;
            text-align: center;
            white-space: normal;
            overflow-wrap: anywhere;
        }

        .popup-message .app-dialog-actions button[style*="display: none"] {
            display: none !important;
        }

        .popup-message .app-dialog-actions button[style*="display: none"] + button,
        .popup-message .app-dialog-actions:has(button:first-child[style*="display: none"]) button:last-child {
            grid-column: 1 / -1;
        }

        @media (max-width: 600px) {
            .popup-message {
                padding: 0.75rem;
            }

            .popup-message .app-dialog-content {
                width: min(100%, 420px);
                max-width: min(100%, 420px);
                max-height: calc(100dvh - 1.5rem);
                overflow-x: hidden;
            }

            .popup-message .app-dialog-header {
                grid-template-columns: 34px minmax(0, 1fr);
                gap: 0.65rem;
                min-height: 60px;
                padding: 0.75rem 1rem;
            }

            .popup-message .app-dialog-icon {
                width: 34px;
                height: 34px;
            }

            .popup-message #popupText {
                padding: 1rem 1rem 0;
                font-size: 0.9rem;
                line-height: 1.7;
            }

            .popup-message .app-dialog-actions {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 0.5rem;
                margin: 1rem;
                padding-top: 0.85rem;
            }

            .popup-message .app-dialog-actions button {
                min-height: 42px;
                padding: 0.6rem 0.45rem;
                font-size: 0.85rem;
            }
        }

        @media (max-width: 300px) {
            .popup-message .app-dialog-actions {
                grid-template-columns: minmax(0, 1fr);
            }

            .popup-message .app-dialog-actions button {
                grid-column: 1;
            }
        }

        /* Final bulk add and bulk edit responsive layout */
        #bulk-add-modal .modal-content.wide,
        #bulk-edit-modal .modal-content.wide {
            width: min(1040px, calc(100vw - 2.5rem));
            max-width: 1040px;
            height: min(760px, calc(100dvh - 2.5rem));
            max-height: min(760px, calc(100dvh - 2.5rem));
            padding: 0;
        }

        #bulk-add-modal .bulk-edit-columns,
        #bulk-edit-modal .bulk-edit-columns {
            width: 100%;
            min-width: 0;
            max-width: 100%;
            grid-template-columns: minmax(300px, 0.9fr) minmax(360px, 1.1fr);
            gap: 1rem;
            padding: 1rem 1.25rem;
            overflow: hidden;
        }

        #bulk-add-modal .bulk-edit-column,
        #bulk-edit-modal .bulk-edit-column {
            width: 100%;
            max-width: 100%;
        }

        #bulk-add-modal .months-checkbox-container,
        #bulk-edit-modal .months-checkbox-container {
            width: 100%;
            overflow-x: hidden;
        }

        #bulk-add-modal .form-actions,
        #bulk-edit-modal .form-actions {
            width: 100%;
            min-width: 0;
            max-width: 100%;
            align-items: center;
            justify-content: flex-end;
        }

        @media (max-width: 768px) {
            #bulk-add-modal,
            #bulk-edit-modal {
                padding: 0.5rem;
                align-items: center;
            }

            #bulk-add-modal .modal-content.wide,
            #bulk-edit-modal .modal-content.wide {
                display: flex;
                flex-direction: column;
                width: 100%;
                max-width: 100%;
                height: calc(100dvh - 1rem);
                max-height: calc(100dvh - 1rem);
                margin: 0;
                padding: 0;
                overflow-x: hidden;
                overflow-y: auto;
                scroll-padding-top: 68px;
                scroll-padding-bottom: 84px;
                scrollbar-width: none;
            }

            #bulk-add-modal .modal-content.wide::-webkit-scrollbar,
            #bulk-edit-modal .modal-content.wide::-webkit-scrollbar {
                display: none;
            }

            #bulk-add-modal .modal-header,
            #bulk-edit-modal .modal-header {
                position: sticky;
                top: 0;
                z-index: 5;
                flex: 0 0 auto;
                width: 100%;
                min-height: 56px;
                padding: 0.7rem 0.85rem;
            }

            #bulk-add-modal .bulk-edit-columns,
            #bulk-edit-modal .bulk-edit-columns {
                display: grid;
                grid-template-columns: minmax(0, 1fr);
                flex: 0 0 auto;
                width: 100%;
                min-width: 0;
                max-width: 100%;
                gap: 0.75rem;
                margin: 0;
                padding: 0.75rem;
                overflow: visible;
            }

            #bulk-add-modal .bulk-edit-column,
            #bulk-edit-modal .bulk-edit-column {
                min-height: auto;
                padding: 0.8rem;
            }

            #bulk-add-modal .bulk-edit-column h4,
            #bulk-edit-modal .bulk-edit-column h4 {
                margin-bottom: 0.7rem;
                font-size: 0.9rem !important;
            }

            #bulk-add-modal .form-group,
            #bulk-edit-modal .form-group {
                margin-bottom: 0.75rem;
            }

            #bulk-add-modal select,
            #bulk-add-modal input[type="search"],
            #bulk-edit-modal select,
            #bulk-edit-modal input[type="text"],
            #bulk-edit-modal input[type="number"] {
                min-height: 44px;
                font-size: 0.88rem !important;
            }

            #bulk-add-modal .months-checkbox-container,
            #bulk-edit-modal .months-checkbox-container {
                flex: none;
                width: 100%;
                max-height: 300px;
                padding: 0.55rem;
                overflow-x: hidden;
                overflow-y: auto;
            }

            #bulk-add-modal .month-checkbox-item,
            #bulk-edit-modal .month-checkbox-item,
            #bulk-edit-modal .month-checkbox {
                width: 100%;
                min-width: 0;
                max-width: 100%;
            }

            #bulk-add-modal .form-actions,
            #bulk-edit-modal .form-actions {
                position: sticky;
                bottom: 0;
                z-index: 5;
                flex: 0 0 auto;
                width: 100%;
                min-width: 0;
                max-width: 100%;
                margin: 0;
                padding: 0.75rem;
                background: rgba(255, 255, 255, 0.98);
                box-shadow: 0 -1px 0 var(--border-color);
            }

            #bulk-add-modal .form-actions {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 0.5rem;
            }

            #bulk-edit-modal .form-actions {
                display: grid;
                grid-template-columns: minmax(0, 1fr);
            }

            #bulk-add-modal .form-actions button,
            #bulk-edit-modal .form-actions button {
                width: 100%;
                min-width: 0;
                min-height: 44px;
                margin: 0;
            }
        }

        /* Final mobile-only AI chat override; desktop layout remains unchanged. */
        @media (max-width: 600px) {
            #ai-chat-modal {
                padding: 0;
            }

            #ai-chat-modal .ai-chat-content.modal-content {
                width: 100%;
                height: 100dvh;
                max-width: none;
                max-height: 100dvh;
                margin: 0;
                padding: 0;
                border: 0;
                border-radius: 0;
            }

            #ai-chat-modal .modal-header,
            #ai-chat-modal .ai-chat-toolbar,
            #ai-chat-modal .ai-chat-messages,
            #ai-chat-modal .ai-chat-composer {
                width: 100%;
                max-width: none;
            }

            #ai-chat-modal .ai-chat-messages {
                padding: 0.75rem;
            }

            #ai-chat-modal .ai-chat-welcome,
            #ai-chat-modal .ai-message,
            #ai-chat-modal .ai-message-body {
                min-width: 0;
                max-width: 100%;
            }

            #ai-chat-modal .ai-message-body {
                font-size: 0.88rem;
            }

            #ai-chat-modal .ai-message-body p,
            #ai-chat-modal .ai-message-body li,
            #ai-chat-modal .ai-message-body blockquote,
            #ai-chat-modal .ai-message-body dd,
            #ai-chat-modal .ai-message-body a,
            #ai-chat-modal .ai-message-body :not(pre)>code {
                overflow-wrap: anywhere;
                word-break: break-word;
            }

            #ai-chat-modal .ai-message-body h3,
            #ai-chat-modal .ai-message-body h4,
            #ai-chat-modal .ai-message-body h5,
            #ai-chat-modal .ai-message-body h6 {
                margin-top: 0.75rem;
            }

            #ai-chat-modal .ai-message-body ul,
            #ai-chat-modal .ai-message-body ol {
                padding-left: 1.15rem;
            }

            #ai-chat-modal .ai-message-body ul ul,
            #ai-chat-modal .ai-message-body ol ol,
            #ai-chat-modal .ai-message-body ul ol,
            #ai-chat-modal .ai-message-body ol ul {
                padding-left: 0.9rem;
            }

            #ai-chat-modal .ai-message-body blockquote {
                margin: 0.55rem 0;
                padding: 0.1rem 0.65rem;
            }

            #ai-chat-modal .ai-message-body pre,
            #ai-chat-modal .ai-message-body .ai-math-block,
            #ai-chat-modal .ai-table-wrapper {
                width: 100%;
                max-width: 100%;
                overflow-x: auto;
                overscroll-behavior-x: contain;
                -webkit-overflow-scrolling: touch;
            }

            #ai-chat-modal .ai-message-body pre {
                padding: 0.65rem;
                font-size: 0.78rem;
            }

            #ai-chat-modal .ai-table-wrapper th,
            #ai-chat-modal .ai-table-wrapper td {
                padding: 0.48rem 0.55rem;
                font-size: 0.78rem;
            }

            #ai-chat-modal .ai-markdown-image-link {
                width: 100%;
            }
        }

        /* Keep the account display name beside the app title on mobile. */
        @media (max-width: 768px) {
            .header-identity {
                grid-column: 2;
                display: flex;
                align-items: baseline;
                gap: 0.4rem;
                width: 100%;
                min-width: 0;
                overflow: hidden;
            }

            .header-identity .header-title {
                flex: 0 0 auto;
                white-space: nowrap;
                overflow-wrap: normal;
            }

            .header-identity #user-name-container {
                grid-column: auto;
                flex: 1 1 auto;
                width: auto;
                min-width: 0;
                max-width: none;
                overflow: hidden;
            }

            .header-identity #user-name-display {
                width: 100%;
                padding: 0;
                font-size: 0.78rem !important;
                text-align: left;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                overflow-wrap: normal;
            }

            .header-identity .user-name-edit-field {
                width: 100%;
                max-width: none;
                min-width: 0;
                font-size: 0.78rem !important;
            }
        }

        /* Responsive sizing for interactive dialogs. Popup messages keep their compact size. */
        .modal-overlay,
        .password-overlay,
        .account-auth-overlay {
            padding: clamp(0.6rem, 2.5vmin, 2rem);
        }

        .modal-overlay>.modal-content {
            width: clamp(320px, 68vw, 760px);
            max-width: calc(100vw - clamp(1.2rem, 5vmin, 4rem));
            max-height: calc(100dvh - clamp(1.2rem, 5vmin, 4rem));
        }

        .modal-overlay>.modal-content.wide {
            width: min(92vw, 1180px);
            max-width: calc(100vw - clamp(1.2rem, 5vmin, 4rem));
            height: min(88dvh, 860px);
            max-height: calc(100dvh - clamp(1.2rem, 5vmin, 4rem));
        }

        .password-overlay>.password-card,
        .account-auth-overlay>.account-auth-card {
            width: clamp(320px, 42vw, 520px);
            max-width: calc(100vw - clamp(1.2rem, 5vmin, 4rem));
            max-height: calc(100dvh - clamp(1.2rem, 5vmin, 4rem));
        }

        @media (min-width: 1440px) {
            .modal-overlay>.modal-content:not(.wide) {
                width: min(58vw, 860px);
            }

            .modal-overlay>.modal-content.wide {
                width: min(90vw, 1360px);
                height: min(90dvh, 940px);
            }

            .password-overlay>.password-card,
            .account-auth-overlay>.account-auth-card {
                width: min(38vw, 560px);
            }
        }

        @media (max-width: 768px) {
            .modal-overlay,
            .password-overlay,
            .account-auth-overlay {
                padding: clamp(0.35rem, 1.8vmin, 0.65rem);
            }

            .modal-overlay>.modal-content,
            .modal-overlay>.modal-content.wide,
            .password-overlay>.password-card,
            .account-auth-overlay>.account-auth-card {
                width: 100%;
                max-width: 100%;
                max-height: calc(100dvh - clamp(0.7rem, 3.6vmin, 1.3rem));
                margin: 0;
            }

            .modal-overlay>.modal-content.wide {
                height: calc(100dvh - clamp(0.7rem, 3.6vmin, 1.3rem));
            }
        }

        @media (max-width: 480px), (max-height: 560px) {
            .modal-overlay,
            .password-overlay,
            .account-auth-overlay {
                padding: 0.35rem;
            }

            .modal-overlay>.modal-content,
            .modal-overlay>.modal-content.wide,
            .password-overlay>.password-card,
            .account-auth-overlay>.account-auth-card {
                max-height: calc(100dvh - 0.7rem);
                border-radius: clamp(8px, 3vw, var(--border-radius));
            }

            .modal-overlay>.modal-content.wide {
                height: calc(100dvh - 0.7rem);
            }
        }